Property "message" was accessed during render but is not defined on instance. - Vue 3 & TypeScript

Version

3.0.0-rc.11

Reproduction link

https://github.com/dannysmc95/vue3-issue1

Steps to reproduce

!! Please note I have added vue-next as Vue3 is NOT available on the bug reporter, this was created using @vue/cli using the Vue 3 Preview feature.

1. Pull the repo link, and do npm install,
2. Run npm run serve,
3. View the page in the browser, with the vue-devtools installed and the console open (I use Chrome),
4. Uncomment the public random line,
5. See the error in the console,

What is expected?

There should be no error and the p tag should still display the text.

Unless I am doing something wrong, but I don’t believe so, I have removed the access definitions (public, private, etc), and no change.

What is actually happening?

I am seeing an error relating to reactivity, and it breaks the page, stopping the p tag from showing and forcing me to refresh the page each time, which kind of defeats the point of HMR.

See error output:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property “message” was accessed during render but is not defined on instance.
at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
get @ runtime-core.esm-bundler.js?5c40:5696
render @ Home.vue?bb51:3
renderComponentRoot @ runtime-core.esm-bundler.js?5c40:535
componentEffect @ runtime-core.esm-bundler.js?5c40:4286
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4269
mountComponent @ runtime-core.esm-bundler.js?5c40:4227
processComponent @ runtime-core.esm-bundler.js?5c40:4183
patch @ runtime-core.esm-bundler.js?5c40:3788
componentEffect @ runtime-core.esm-bundler.js?5c40:4373
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:359
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:259
queueCb @ runtime-core.esm-bundler.js?5c40:281
queuePostFlushCb @ runtime-core.esm-bundler.js?5c40:287
eval @ runtime-core.esm-bundler.js?5c40:473
reload @ runtime-core.esm-bundler.js?5c40:459
eval @ runtime-core.esm-bundler.js?5c40:499
eval @ VM1034 Home.vue:14
./src/views/Home.vue @ app.js:1057
webpack_require @ app.js:849
hotApplyInternal @ app.js:750
hotApply @ app.js:412
(anonymous) @ app.js:387
Promise.then (async)
hotUpdateDownloaded @ app.js:386
hotAddUpdateChunk @ app.js:362
webpackHotUpdateCallback @ app.js:58
(anonymous) @ app.28fcc07….hot-update.js:1

---

!! Please note I have added vue-next as Vue3 is NOT available on the bug reporter.

[nicolidin]

I have the same problem working with the Option API and thus with the @Options decorator (without using setup). When I use the vue-devtools, all my component are Anonymous:

However, this bug does not occur if I precize name=“component name” inside the decorator Options like that:

@Options({
    name: "MyComponent"
})
export default class MyComponent extends Vue {

It’s sadly a duplication… Hope you can fix this problem @posva @ktsn

(version used: “vue-class-component”: “8.0.0-beta.4”,)

[bobohuochai]

The same problem with @nicolidin … (verison used: 8.0.0-rc.1)