Problem loading/booting a custom fieldtypes - Component […] does not exist.

I’m trying to register a custom fieldtypes for the control panel.

This is a step by step of what I did.

php please support:details 

• Statamic 3.1.32 Pro
• Laravel 8.52.0
• PHP 7.4.21

1. Run the command

php please make:fieldtype FormSection

2. Adding the code in AppServiceProvider.php

public function boot()
    {
        Statamic::script('app', 'cp');
    }

3. Adding script in webpack.mix.js

Mix..js('resources/js/statamic/cp.js', 'public/vendor/app/js')

4. Creating the js file in resources/js/statamic/cp.js

import Fieldtype from '../components/fieldtypes/FormSection';
Statamic.$components.register('form_section-fieldtype', Fieldtype);

5. Adding a very basic vue component

<template>
    <div>
        <text-input :value="value" @input="update" />
    </div>
</template>

...script tag
export default {
    mixins: [Fieldtype],
    data() {
        return {
            "test": "Simon Bédard",
        };
    }
};
...Closing script tag

At this point the field is visible in the in the blueprint.

When added to a blueprint, I get:

Component […] does not exist.

7. I validate that the cp.js was loaded in the chrome DevTools. The cp.js is loaded correctly.

I have no errors in the console.

8. I tried to add a simple console.log to see if I was passing in the cp.js file

import Fieldtype from '../components/fieldtypes/FormSection';
Console.log(‘Passing here’);
Statamic.$components.register('form_section-fieldtype', Fieldtype);

Unfortunately, nothing append.

Maybe I’m missing something ?

Thanks Simon