diff --git a/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts b/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
index 6ed1fca174..f2cae161a9 100644
--- a/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
+++ b/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
@@ -6,7 +6,7 @@ import {
   Item,
   RouteData,
 } from '@sitecore-jss/sitecore-jss';
-import { Component, h, VNode, DefineComponent, ref, watchEffect } from 'vue';
+import { Component, h, VNode, DefineComponent, ref, onMounted } from 'vue';
 import { MissingComponent } from './MissingComponent';
 import { ComponentFactory } from './sharedTypes';
 
@@ -187,27 +187,29 @@ function createRawElement(elem: any) {
     setup() {
       const elRef = ref(null);
 
-      /*
-       * Since we can't set the "key" via Vue attributes
-       * so we can set in the DOM after render.
-       */
-      if (
-        !Array.isArray(elem.attributes) &&
-        elem.attributes &&
-        elem.attributes.chrometype === 'placeholder' &&
-        elem.attributes.key
-      ) {
-        watchEffect(
-          () => {
-            elRef.value.setAttribute('key', elem.attributes.key);
-          },
-          { flush: 'post' }
-        );
-      }
+      onMounted(() => {
+        /*
+         * Since we can't set the "key" via Vue attributes
+         * so we can set in the DOM after render.
+         * onMounted is called when the initial page load is happening
+         * onMounted is not called when we add new rendering on the page,
+         * so we will replace phkey by key
+         */
+        if (
+          !Array.isArray(elem.attributes) &&
+          elem.attributes &&
+          elem.attributes.chrometype === 'placeholder' &&
+          elem.attributes.key
+        ) {
+          elRef.value.setAttribute('key', elem.attributes.key);
+        }
+      });
+
       return () =>
         h(elem.name, {
           ...elem.attributes,
           innerHTML: elem.contents,
+          phkey: elem.attributes?.key,
           ref: elRef,
         });
     },
diff --git a/packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap b/packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap
index 21713e1ff7..0f535a3a35 100644
--- a/packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap
+++ b/packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap
@@ -244,6 +244,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
       id="main"
       class="scpm"
       data-selectable="true"
+      phkey="main"
       key="main"
 >
   {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
@@ -265,6 +266,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
         id="page_header"
         class="scpm"
         data-selectable="true"
+        phkey="page-header"
         key="page-header"
   >
     {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
@@ -303,6 +305,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
         id="page_content"
         class="scpm"
         data-selectable="true"
+        phkey="page-content"
         key="page-content"
   >
     {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
@@ -370,6 +373,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render a placeho
       id="page_content"
       class="scpm"
       data-selectable="true"
+      phkey="page-content"
       key="page-content"
 >
   {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
@@ -423,6 +427,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
             id="main"
             class="scpm"
             data-selectable="true"
+            phkey="main"
             key="main"
       >
         {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
@@ -448,6 +453,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
               id="page_header"
               class="scpm"
               data-selectable="true"
+              phkey="page-header"
               key="page-header"
         >
           {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
@@ -486,6 +492,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
               id="page_content"
               class="scpm"
               data-selectable="true"
+              phkey="page-content"
               key="page-content"
         >
           {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
@@ -560,6 +567,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
       id="main"
       class="scpm"
       data-selectable="true"
+      phkey="main"
       key="main"
 >
   {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
@@ -581,6 +589,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
         id="page_header"
         class="scpm"
         data-selectable="true"
+        phkey="page-header"
         key="page-header"
   >
     {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
@@ -619,6 +628,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
         id="page_content"
         class="scpm"
         data-selectable="true"
+        phkey="page-content"
         key="page-content"
   >
     {"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
diff --git a/samples/vue/server/server.js b/samples/vue/server/server.js
index bbddcc94f4..984794c795 100644
--- a/samples/vue/server/server.js
+++ b/samples/vue/server/server.js
@@ -115,6 +115,8 @@ export function renderView(callback, path, data, viewBag) {
           html = assertReplace(html, '<body>', `<body ${meta.teleports.bodyAttrs || ''}>`);
         }
 
+        html = html.replace(new RegExp('phkey', 'g'), 'key');
+
         callback(null, {
           html,
         });