From 0ee358c8e79f1ea953bf4aa93ecce3de1bf07507 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Thu, 14 Jul 2022 18:02:23 +0300
Subject: [PATCH 1/2] fix(useStyleTag): fix hydration mismatch issue

---
 packages/core/useStyleTag/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/useStyleTag/index.ts b/packages/core/useStyleTag/index.ts
index e49c86ae101..de909d4270f 100644
--- a/packages/core/useStyleTag/index.ts
+++ b/packages/core/useStyleTag/index.ts
@@ -1,4 +1,4 @@
-import { readonly, ref, watch } from 'vue-demi'
+import { nextTick, readonly, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import type { MaybeRef } from '@vueuse/shared'
@@ -89,7 +89,7 @@ export function useStyleTag(
       { immediate: true },
     )
 
-    isLoaded.value = true
+    nextTick(() => isLoaded.value = true)
   }
 
   const unload = () => {

From 79f02fc5b501da32315ec4eaf866231040be1d7d Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Thu, 14 Jul 2022 18:19:47 +0300
Subject: [PATCH 2/2] refactor: wrap `load` call with `tryOnMounted`

---
 packages/core/useStyleTag/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/useStyleTag/index.ts b/packages/core/useStyleTag/index.ts
index de909d4270f..d89e11203c0 100644
--- a/packages/core/useStyleTag/index.ts
+++ b/packages/core/useStyleTag/index.ts
@@ -1,6 +1,6 @@
-import { nextTick, readonly, ref, watch } from 'vue-demi'
+import { readonly, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
-import { tryOnScopeDispose } from '@vueuse/shared'
+import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import type { MaybeRef } from '@vueuse/shared'
 import type { ConfigurableDocument } from '../_configurable'
 import { defaultDocument } from '../_configurable'
@@ -89,7 +89,7 @@ export function useStyleTag(
       { immediate: true },
     )
 
-    nextTick(() => isLoaded.value = true)
+    isLoaded.value = true
   }
 
   const unload = () => {
@@ -101,7 +101,7 @@ export function useStyleTag(
   }
 
   if (immediate && !manual)
-    load()
+    tryOnMounted(load)
 
   if (!manual)
     tryOnScopeDispose(unload)