From f0086288512bd7f7d1929d79bfd8bf702efc732e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 4 Jun 2021 19:25:02 -0400
Subject: [PATCH] fix(vue): improve v-model integration for Vue 3.1.0+ (#23420)

---
 core/package-lock.json                      | 14 +++++++-------
 core/package.json                           |  2 +-
 packages/vue/src/vue-component-lib/utils.ts | 10 +++++++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 84ed0c05db5..841d7f9298e 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -19,7 +19,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",
@@ -1374,9 +1374,9 @@
       "dev": true
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz",
-      "integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.3.tgz",
+      "integrity": "sha512-+oTTSjzISERzrBDrtu3Iyhv69SSwzauQGnAej7GAWbLhzp/rCMyMHOTnZe5V+niJH9SHh1VahaVc3NQsA251qw==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=1.8.0"
@@ -15022,9 +15022,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz",
-      "integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.3.tgz",
+      "integrity": "sha512-+oTTSjzISERzrBDrtu3Iyhv69SSwzauQGnAej7GAWbLhzp/rCMyMHOTnZe5V+niJH9SHh1VahaVc3NQsA251qw==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {
diff --git a/core/package.json b/core/package.json
index a210d163223..15be22e62dd 100644
--- a/core/package.json
+++ b/core/package.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",
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index 176fc77652a..143e643a855 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -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
         }
       }