tryOnMounted not compactible with Vue 2

[DarknessChaser]

Describe the bug

The changes in version 10.7.0 #3597 seem to cause useLocalStorage to no longer support vue2.6 and vue2.7.

vue2.6.14 + @vue/composition-api1.7.2 error message

see https://stackblitz.com/edit/vue2-vue-cli-a9cecv?file=src%2Fcomponents%2FHelloWorld.vue

vue 2.7.16-beta.1 error message

see https://codesandbox.io/p/sandbox/vue2-createreusabletemplate-qg4jxm?file=%2Fsrc%2FApp.vue&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq35117p00063b6hk9igf2y2%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq35117o00023b6h0r5ithxg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq35117o00033b6hy44e1bro%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq35117o00053b6h3yb2a5t2%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq35117o00023b6h0r5ithxg%2522%253A%257B%2522id%2522%253A%2522clq35117o00023b6h0r5ithxg%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq535zdj00023b6hj4upmz4l%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clq535zdj00023b6hj4upmz4l%2522%257D%252C%2522clq35117o00053b6h3yb2a5t2%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq35117o00043b6h92eun3ax%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clq35117o00053b6h3yb2a5t2%2522%252C%2522activeTabId%2522%253A%2522clq35117o00043b6h92eun3ax%2522%257D%252C%2522clq35117o00033b6hy44e1bro%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clq35117o00033b6hy44e1bro%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

In vue3 it works fine

Reproduction

see https://stackblitz.com/edit/vue2-vue-cli-a9cecv?file=src%2Fcomponents%2FHelloWorld.vue

System Info

System:
    OS: macOS 14.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 39.31 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.21.3 - ~/.volta/tools/image/node/14.21.3/bin/node
    npm: 6.14.18 - ~/.volta/tools/image/npm/6.14.18/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Edge: 120.0.2210.61
    Safari: 17.1
    Safari Technology Preview: 17.4
  npmPackages:
    @vueuse/core: ^10.7.0 => 10.7.0 
    @vueuse/math: ^10.2.1 => 10.2.1 
    vue: 2.6.11 => 2.6.11

Used Package Manager

npm

Validations

• Follow our Code of Conduct #3654
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[DarknessChaser]

It seems to be caused by the different behavior of the setup function.

[Doctor-wu]

That appears to be a problem with the tryOnMounted hooks instead of useLocalStorage. I will attempt to resolve it.

[Doctor-wu]

As a deeper investigation, it's vueDemi::isVue3 flag bug

[Doctor-wu]

@DarknessChaser This works well on my local, did you get some errors in your local repo or some what? It seems that vue-demi's postInstall didn't trigger in CodeSandbox

[DarknessChaser]

@Doctor-wu 首先感谢您的帮助！

实际上我用的是 vue2.6.11+@vue/composition-api1.7.2的组合。我更新了https://stackblitz.com/edit/vue2-vue-cli-a9cecv?file=src%2Fcomponents%2FHelloWorld.vue上的例子。

这段代码执行了两次。

第一次

第二次

proxy消失了……

vue2 or 3的判断看上去工作正常

[Doctor-wu]

OK, it appears to be the bug taken by 1b9673a. It returns instance.proxy in Vue2 but an instance with aproxy field would be used in @vue/composition-api.

[DarknessChaser]

OK, it appears to be the bug taken by 1b9673a. It returns instance.proxy in Vue2 but an instance with aproxy field would be used in @vue/composition-api.

good news!
It seems to be working normally on vue2.7!

bad news
vue2.6 still has problems

[Doctor-wu]

OK, it appears to be the bug taken by 1b9673a. It returns instance.proxy in Vue2 but an instance with aproxy field would be used in @vue/composition-api.

good news! It seems to be working normally on vue2.7!

bad news vue2.6 still has problems

Did you experience this error in your local repo? It seems vue-demi didn't work well in this reproduction.

[DarknessChaser]

OK, it appears to be the bug taken by 1b9673a. It returns instance.proxy in Vue2 but an instance with aproxy field would be used in @vue/composition-api.

good news! It seems to be working normally on vue2.7!
bad news vue2.6 still has problems

Did you experience this error in your local repo? It seems vue-demi didn't work well in this reproduction.

Local seems to be working fine, thanks!