3 files changed, 47 insertions, 2 deletions
diff --git a/plugins/Goals/vue/src/ManageGoals/ManageGoals.store.ts b/plugins/Goals/vue/src/ManageGoals/ManageGoals.store.ts
new file mode 100644
index 0000000000..d6c09809b4
--- /dev/null
+++ b/plugins/Goals/vue/src/ManageGoals/ManageGoals.store.ts
@@ -0,0 +1,24 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { computed, reactive } from 'vue';
+
+interface ManageGoalsStoreState {
+  idGoal?: number;
+}
+
+class ManageGoalsStore {
+  private privateState = reactive<ManageGoalsStoreState>({});
+
+  readonly idGoal = computed(() => this.privateState.idGoal);
+
+  setIdGoalShown(idGoal?: number) {
+    this.privateState.idGoal = idGoal;
+  }
+}
+
+export default new ManageGoalsStore();
diff --git a/plugins/Goals/vue/src/ManageGoals/ManageGoals.vue b/plugins/Goals/vue/src/ManageGoals/ManageGoals.vue
index f3ba68030c..0e155fd934 100644
--- a/plugins/Goals/vue/src/ManageGoals/ManageGoals.vue
+++ b/plugins/Goals/vue/src/ManageGoals/ManageGoals.vue
@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div>
+  <div class="manageGoals">
     <!-- v-show required until funnels/multiattribution are using vue and not angularjs -->
     <div v-show="!onlyShowAddNewGoal">
       <div
@@ -403,6 +403,7 @@ import {
 } from 'CorePluginsAdmin';
 import Goal from '../Goal';
 import PiwikApiMock from './PiwikApiMock';
+import ManageGoalsStore from './ManageGoals.store';
 
 interface ManageGoalsState {
   showEditGoal: boolean;
@@ -465,6 +466,12 @@ export default defineComponent({
     ContentTable,
     Form,
   },
+  created() {
+    ManageGoalsStore.setIdGoalShown(this.showGoal);
+  },
+  unmounted() {
+    ManageGoalsStore.setIdGoalShown(undefined);
+  },
   mounted() {
     if (this.showAddGoal) {
       this.createGoal();
@@ -785,8 +792,13 @@ export default defineComponent({
 
       const componentsByIdGoal: Record<string, unknown> = {};
       Object.values(this.goals as Record<string, Goal>).forEach((g) => {
+        const template = this.beforeGoalListActionsBody![g.idgoal];
+        if (!template) {
+          return;
+        }
+
         componentsByIdGoal[g.idgoal] = {
-          template: this.beforeGoalListActionsBody![g.idgoal],
+          template,
         };
       });
       return markRaw(componentsByIdGoal);
@@ -796,8 +808,15 @@ export default defineComponent({
         return null;
       }
 
+      const endedittable = this.$refs.endedittable as HTMLElement;
       return markRaw({
         template: this.endEditTable,
+        mounted() {
+          Matomo.helper.compileVueEntryComponents(endedittable);
+        },
+        beforeUnmount() {
+          Matomo.helper.destroyVueComponent(endedittable);
+        },
       });
     },
     beforeGoalListActionsHeadComponent() {
diff --git a/plugins/Goals/vue/src/index.ts b/plugins/Goals/vue/src/index.ts
index a792651336..651bab3779 100644
--- a/plugins/Goals/vue/src/index.ts
+++ b/plugins/Goals/vue/src/index.ts
@@ -10,3 +10,5 @@ import './ManageGoals/ManageGoals.adapter';
 
 export { default as GoalPageLink } from './GoalPageLink/GoalPageLink.ts';
 export { default as ManageGoals } from './ManageGoals/ManageGoals.vue';
+export { default as ManageGoalsStore } from './ManageGoals/ManageGoals.store';
+export { default as PiwikApiMock } from './ManageGoals/PiwikApiMock';