How to correctly connect vue component to the page?

Question

Pug

tell me how to correctly connect the component script only on the required page? There is an index.js entry point in webpack, if I include a vue component in it everything works fine. But at the same time, this script is connected to all pages, which I need to avoid.
When making this connection into a separate js file

import { createApp } from "vue";
import App from "./App.vue";
import store from "./vuex/store.js";

createApp(App)
  .use(store)
  .mount("#app-cart");

The following problem occurs in the console:

Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"

and a required component is not displayed on the page How can I fix this problem?

this is my pug template where i inline the script

- var pageName = "Front"
doctype html
html(lang="ru")
  block head
    ......
  body
    .......
      include components/header
      include components/footer
      block header
        +header-var
      block title
      block content
        .wrap
          .content
            ........
      block footer
        +footer-var
      include components/popups
    ......
    script(type="module", src="assets/js/cart-vue.js")

Answer 1

The script of which lies in assets and is simply inlined in html - it is not compiled by webpack and is included as is. Obviously, nothing will work.
You need to add an extra entryfor webpack to get it to compile the result. Or make a separate webpack project for this script.