Vue3 and TrixEditor: Failed to resolve component: trix-editor

I’m fiddling around with Vue 3 (Inertia) and are trying to integrate the Trix Editor. The editor renders, but there is a error in the console log:

[Vue warn]: Failed to resolve component: trix-editor 
  at <TrixComponent id="A" onDataFromTrix=fn<bound getDataFromTrix> > 
  at <BaseLayout> 
  at <Home key=1603032868935 > 
  at <Inertia initialPage= 
Object { component: "Home", props: [], url: "/", version: "", scrollRegions: [], rememberedState: {} }
 resolveComponent=fn<resolveComponent> > 
  at <App>

Anyone has any clue how to fix this warning?

TrixComponent

<template>
    <div>
        <input :id="id" type="hidden" name="content" v-model="trixText">
        <!-- updated here -->
        <trix-editor :input="id"></trix-editor>
    </div>
</template>

<script>
import Trix from 'trix'
import 'trix/dist/trix.css'

export default {
    props: ["id"],
    data() {
        return {
            trixText: ""
        };
    },
    methods: {
        setTextToTrix(e) {
            this.trixText = document.getElementById(this.id).value;
        },
        emitDataBackToComponent() {
            this.$emit("dataFromTrix", this.trixText);
        }
    },
    mounted() {
        document.addEventListener("trix-change", this.setTextToTrix);
    },
    beforeUnmount: function() {
        document.removeEventListener("trix-change", this.setTextToTrix);
    },
    updated() {
        this.emitDataBackToComponent();
    }
};
</script>

Home page

//Home.vue
<template>
    <BaseLayout>

    <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>

    <template v-slot:default>
        <h1>Hello from Inertia Vue 3</h1>
        <inertia-link href="/contact">Contact</inertia-link>
        <inertia-link href="/blog">Blog</inertia-link>
        <TrixComponent :id="id" @dataFromTrix="getDataFromTrix"></TrixComponent>
    </template>

    <template v-slot:footer>
        <p>Here's some contact info</p>
    </template>

    </BaseLayout>
</template>


<script>
import BaseLayout from "../Components/BaseLayout";
import TrixComponent from "../Components/TrixComponent"

export default {
    components: {
        BaseLayout,
        TrixComponent
    },
    data() {
        return {
            textA: "",
            id: "A"
        };
    },
    mounted() {
        //console.log(route('home'))
    },
    methods: {
        getDataFromTrix: function(data) {
            this.textA = data;
        }
    }
};
</script>
``