fix(vue): using refs with v-model now works properly (#22092)

resolves #22076

core/package-lock.json

@@ -1385,9 +1385,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.1.1.tgz",
-      "integrity": "sha512-oUx9ThRCnZWa1fZfcSaPBCuN+Fk4ZITbBfFt8VbRq215fTHsA1It7gT7SfMRlvcy/ciriprlwY+QZ4wwuE2Qlw==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.1.2.tgz",
+      "integrity": "sha512-UgaDR1PHqWO5XE41NK6YGj3IZLfnZQry0mxilnMHEegCdhp7dMrG4VaRw35BFbgnL9rRYJ0xvpergYkoT946uA==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {

core/package.json

@@ -38,7 +38,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/core": "1.17.3",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.1.1",
+    "@stencil/vue-output-target": "0.1.2",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",

packages/vue-router/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "5.4.0-dev.202009101934.5ffa65f",
+  "version": "5.4.0-dev.202009151837.5c69db1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

packages/vue/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "5.4.0-dev.202009101933.5ffa65f",
+  "version": "5.4.0-dev.202009151837.5c69db1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

packages/vue/src/vue-component-lib/utils.ts

@@ -48,33 +48,16 @@ export const defineContainer = <Props extends object>(name: string, componentPro
     const { modelValue, ...restOfProps } = props;
     const containerRef = ref<HTMLElement>();
     const classes: string[] = (attrs.class as string)?.split(' ') || [];
-
-    let finalProps: any = (modelProp) ? (
-      {
-        ...restOfProps,
-        [modelProp]: props.hasOwnProperty(MODEL_VALUE) ? modelValue : (props as any)[modelProp],
+    const onVnodeBeforeMount = (vnode: VNode) => {
+      // Add a listener to tell Vue to update the v-model
+      if (vnode.el) {
+        vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
+          emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]);
+        });
       }
-    ) : restOfProps;
+    };
 
-
-    if (modelUpdateEvent) {
-      const onVnodeBeforeMount = (vnode: VNode) => {
-
-        // Add a listener to tell Vue to update the v-model
-        if (vnode.el) {
-          vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
-            emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]);
-          });
-        }
-      };
-
-      finalProps = {
-        ...finalProps,
-        ...attrs,
-        onVnodeBeforeMount,
-        ref: containerRef
-      }
-    }
+    let finalProps: any = { ...restOfProps };
 
     if (routerLinkComponent) {
       const navManager: NavManager = inject(NAV_MANAGER);
@@ -102,15 +85,29 @@ export const defineContainer = <Props extends object>(name: string, componentPro
       }
     }
 
-    return () =>
-      h(
-        name,
-        {
-          ...finalProps,
-          class: getElementClasses(containerRef, classes),
-        },
-        slots.default && slots.default()
-      );
+    return () => {
+      let propsToAdd = {
+        ...finalProps,
+        ref: containerRef,
+        class: getElementClasses(containerRef, classes)
+      };
+
+      if (modelUpdateEvent) {
+        propsToAdd = {
+          ...propsToAdd,
+          onVnodeBeforeMount
+        }
+      }
+
+      if (modelProp) {
+        propsToAdd = {
+          ...propsToAdd,
+          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : (props as any)[modelProp]
+        }
+      }
+
+      return h(name, propsToAdd, slots.default && slots.default());
+    }
   });
 
   Container.displayName = name;