Правильно ли я инициализирую vue компонент?

Всем привет! Мне кажется, что я делаю что-то не то. Я создаю компонент на vue, который рендерится в html с помощью id

#app-cart(data-url="http://localhost:3000/products")

в самом js файле я объявляю его следующим образом:

import { createApp } from "vue";
import store from "./vuex/store.js";
import cart from "./components/cart.vue";
import cartEmpty from "./components/cart-empty.vue";
import { mapActions, mapGetters } from "vuex";

document.addEventListener(
  "DOMContentLoaded",

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

    if (cartApp) {
      const app = createApp({ });

      app.component("app-cart", {
        data: () => ({
          URL: document.getElementById("app-cart").dataset.url
        }),
        components: { cart, cartEmpty },
        props: ["data-url"],
        template: `
    <cart v-if="PRODUCTS.length" :URL="URL" :CONSTANTS="CONSTANTS" />
    <cart-empty v-else />`,
        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();
        }
      });

      app.use(store).mount("#app-cart");
    }
  },
  false
);

Но в консоли ошибка:

Component is missing template or render function.

Может быть ошибка в том, что я вставляю компоненты в сам шаблон? Но я не хочу полный код описывать в js файле, а хочу вынести его отдельно. В чем моя ошибка?