why does vue stopped working after rendering 2 pages in cshtml?

I am extremely new to programming and i am trying to build a website with asp.net mvc.

after rendering a view page to _layout the vue in the _layout stopped working and the console shows this message

Uncaught SyntaxError: Identifier 'app' has already been declared (at (index):562:13)

I think it is caused by me applying vue scripts to both pages, but i really have no idea how to solve this situation with my very limited knowledge. i have the same code like the following for both cshtml files(_layout and the inner page)

const app = Vue.createApp({ 
   data() { return { }; }, 
   methods: { mymethodshere } })
.mount("#app");

Is there a way to get both pages running smoothly?

thanks for the help in advance.

I have tried to give use different id for the vue to mount, but that doesn't seem to fix the issue.

As the error stated, you have your Vue app twice in the page.

In _layout and somewhere else you have the same app variable.

const app = Vue.createApp

You can for example rename them to app1 and app2.

const app1 = Vue.createApp
.mount("#app1");

const app2 = Vue.createApp
.mount("#app2");

Or you have to combine both to one Vue app.