How to create a vue.js component and properly connect it to the page?

Question

Vue.js

Hello! Tell me, please, what am I doing wrong? In theory, with such a connection, three components should be displayed, but in my opinion only the diva with the ID is initialized and only one component is displayed
(this is the connection in the pug file)

block contentBody
  .cells
    .cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
        <app-cart><app-cart/>
        <app-cart><app-cart/>
        <app-cart><app-cart/>

here I create a component (file -app-cart.vue):

cart.component("app-cart", {
data() {
  return {
    URL: document.getElementById("app-cart").dataset.url
  }
},
<template>
  <cart
  v-if="PRODUCTS.length"
  :URL="URL"
  :CONSTANTS="CONSTANTS"/>
  <cart-empty v-else/>
</template>

<script>
import cart from "./components/cart.vue"
import cartEmpty from "./components/cart-empty.vue"
import {mapActions, mapGetters} from "vuex"
export default {
  name: "app-cart",
  components: { cart, cartEmpty },
  computed: {
    ...mapGetters([
      "PRODUCTS",
      "CONSTANTS"
    ])
  },
  methods: {
  ...mapActions([
    "SET_PRODUCTS_TO_STATE",
    "DEACTIVATE_CART_STATUS",
    "DELETE_ALL_PRODUCTS_FROM_CART",
    "DEFINE_ENCODING",
    "SHOW_CART_FORM"
  ])
  },
   mounted() {
    this.SHOW_CART_FORM();
    this.SET_PRODUCTS_TO_STATE();
    this.DEFINE_ENCODING();
  }
}
</script>
});

and in the js file I initialize it (cart-vue.js)

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

let cartApp = document.querySelector("#app-cart");

if (cartApp) {
  const cart =  createApp(App, {props: ["data-url"]})
    .use(store)
    .mount("#app-cart");
}

Answer 1

block contentBody
  .cells
    .cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
        app-cart
        app-cart
        app-cart

Vue has nothing to do with it.