Version

3.0.9

Reproduction link

https://github.com/khoitnm/football-dynasty

Steps to reproduce

you can go to my pet project, and do the following steps: cd application

Build project normally by using:

npm install

This is an ElectronJS with VueJS, but we can start VueJS independently by just using:

npm run start:web

After the application started, we can open http://localhost:8080/new-manager on Chrome. In the console, we'll see following messages:

Log computed firstname: abc

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <NewManager onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

runtime-dom.esm-bundler.js?830f:194 Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at patchAttr (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:407:16)
    at patchProp (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:593:17)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4004:25)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3976:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3896:21)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4072:13)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3995:17)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3976:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3896:21)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4072:13)

Inside the code, the error happen in the file application/src/main-app/presentation/views/starting/NewManager.vue:

export default defineComponent({
  name: 'NewManager',
  data() {
    return {
      firstName: "abc",
      lastName: "",
      dateOfBirth: new Date(),
    };
  },
  computed: {
    age: function () {
      const a = this.firstName;
      console.log("Log computed firstname: "+a); // If I don't have this line, there will be no error. Note: the console can print the log message though.
      return new Date().getTime();
    }
  },
  methods: {
    onNewManager() {
      console.log("Created new manager");
      this.$router.push('/starting-country');
    }
  }
});

What is expected?

The error shouldn't happen when using data in a computed method.

What is actually happening?

An exception was thrown, and the component couldn't be rendered correctly.

Read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro

Remember to use the forum or the Discord chat to ask questions!