From 78c721b585e759efdc7921016f40242a6b8bb3e2 Mon Sep 17 00:00:00 2001
From: Johannes Lindgren <14206504+johannes-lindgren@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:54:31 +0200
Subject: [PATCH] fix: clean up side effects in Vue 3 helper

---
 packages/lib-helpers/vue3/src/useFieldPlugin.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/lib-helpers/vue3/src/useFieldPlugin.ts b/packages/lib-helpers/vue3/src/useFieldPlugin.ts
index e37a0ee8..4ff91437 100644
--- a/packages/lib-helpers/vue3/src/useFieldPlugin.ts
+++ b/packages/lib-helpers/vue3/src/useFieldPlugin.ts
@@ -4,7 +4,7 @@ import {
   FieldPluginData,
   FieldPluginResponse,
 } from '@storyblok/field-plugin'
-import { onMounted, reactive, UnwrapRef } from 'vue'
+import { onMounted, onUnmounted, reactive, UnwrapRef } from 'vue'
 import { convertToRaw } from './utils'
 
 const updateObjectWithoutChangingReference = (
@@ -28,8 +28,10 @@ export const useFieldPlugin = <Content>(
     type: 'loading',
   })
 
+  let cleanup: () => void = () => undefined
+
   onMounted(() => {
-    createFieldPlugin<Content>({
+    cleanup = createFieldPlugin<Content>({
       ...options,
       onUpdateState: (state) => {
         if (state.type === 'error') {
@@ -90,5 +92,7 @@ export const useFieldPlugin = <Content>(
     })
   })
 
+  onUnmounted(cleanup)
+
   return plugin
 }