Unable to add new Fieldtype

[sander-vth]

Hi,

I am following: https://statamic.dev/extending/fieldtypes

I have done everything the tutorial mentions.
As a result I can see my new fieldtype in the blueprints screen, I can add an icon and parameters.
But when I want to use it, only the title appears in my entries page.

I would expect there to be a text input and a checkbox (from the tutorial), but there's nothing I can do with the fieldtype....

This is my component.vue (directly from example):

<template>
    <div>
        <text-input :type="inputType" :value="value" @input="updateDebounced" />
        <label><input type="checkbox" v-model="show" /> Show Password</label>
    </div>
</template>

<script>
export default {
    mixins: [Fieldtype],
    data() {
        return {
            show: false
        };
    },
    computed: {
        inputType() {
            return this.show ? 'text' : 'password';
        }
    }
};
</script>

This is my js file:

import ApiContent from './components/fieldtypes/component.vue';

Statamic.$components.register('api_content-fieldtype', ApiContent)

And I've ran [npm run dev]

This all results in a JS error in the console and no input field (nor checkbox):
TypeError: Cannot read properties of undefined (reading 'inputType')