fix(vue): improve v-model integration for Vue 3.1.0+ (#23420)

Author: liamdebeasi

core/package-lock.json

@@ -41,7 +41,7 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "^0.4.2",
+    "@stencil/vue-output-target": "^0.4.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "5.4.3",

core/package.json

@@ -121,9 +121,17 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
       };
 
       if (modelProp) {
+        /**
+         * Starting in Vue 3.1.0, all properties are
+         * added as keys to the props object, even if
+         * they are not being used. In order to correctly
+         * account for both value props and v-model props,
+         * we need to check if the key exists for Vue <3.1.0
+         * and then check if it is not undefined for Vue >= 3.1.0.
+         */
         propsToAdd = {
           ...propsToAdd,
-          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
+          [modelProp]: props.hasOwnProperty(MODEL_VALUE) && props[MODEL_VALUE] !== undefined ? props.modelValue : modelPropValue
         }
       }