Building Fieldtypes does not work，This component can run Vue JS in, but the template node fails

[smith-bing]

Statamic 3.3.7 Pro
Laravel 8.83.8
PHP 7.4.28
No addons installed

Problem description

This component can run Vue JS in, but the template node fails.
The picture at the end is the running result and the error displayed on the console.

Please help me correct my mistakes, where and how to correct them.

Step 1

php please make:fieldtype Variant

// app/Fieldtypes/Variant.php

<?php

namespace App\Fieldtypes;

use Statamic\Fields\Fieldtype;

class Variant extends Fieldtype
{
    /**
     * The blank/default value.
     *
     * @return array
     */
    public function defaultValue()
    {
        return [];
    }

    /**
     * Pre-process the data before it gets sent to the publish page.
     *
     * @param mixed $data
     * @return array|mixed
     */
    public function preProcess($data)
    {
        return $data;
    }

    /**
     * Process the data before it gets saved.
     *
     * @param mixed $data
     * @return array|mixed
     */
    public function process($data)
    {
        return $data;
    }

    public function preload()
    {
        return ['foo' => 'bar'];
    }

    protected function configFieldItems(): array
    {
        return [
            'cross' => [
                'display'      => 'Cross Attributes',
                'instructions' => __('Cross attributes of products, thus forming variant products.'),
                'type'         => 'list',
                'width'        => 33,
            ],

            'options' => [
                'display'      => 'Options Attributes',
                'instructions' => __('Attributes of each variant product.'),
                'type'         => 'fields',
                'default'      => [
                    [
                        'handle' => 'image',
                        'field'  => [
                            'container' => 'assets',
                            'folder'    => '/',
                            'max_files' => 1,
                            'display'   => __('Image'),
                            'type'      => 'assets',
                            'width'     => 25,
                        ],
                    ],
                    [
                        'handle' => 'title',
                        'field'  => [
                            'input_type'  => 'text',
                            'display'     => __('Title'),
                            'type'        => 'text',
                            'localizable' => true,
                            'width'       => 25,
                        ],
                    ],
                    [
                        'handle' => 'price',
                        'field'  => [
                            'display' => __('Price'),
                            'type'    => 'float',
                            'width'   => 25,
                        ],
                    ],
                    [
                        'handle' => 'stock',
                        'field'  => [
                            'default' => 1000,
                            'display' => __('Stock'),
                            'type'    => 'integer',
                            'width'   => 25,
                        ],
                    ],
                ],
                'width'        => 66,
            ],
        ];
    }
}

Step 2

Add NPM dependency,
npm install vue

// package.json

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/typography": "^0.5.1",
        "autoprefixer": "^10.4.0",
        "cross-env": "^7.0",
        "css-loader": "^5.2.7",
        "laravel-mix": "^6.0",
        "postcss": "^8.4.5",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.19",
        "vue-loader": "^16.8.3",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^3.2.33"
    }
}

Step 3

Edit JS file

// webpack.mix.js

mix.js('resources/js/cp.js', 'public/vendor/app/js')
    .vue()  // After the version of laravel mix is updated to 6.0, please add `vue()` here
    .postCss('resources/css/cp.css', 'public/vendor/app/css', [
        require('tailwindcss'),
    ])
    .sourceMaps()

// resources/js/cp.js

import Variant from './components/fieldtypes/Variant.vue';

Statamic.booting(() => {
    Statamic.$components.register('variant-fieldtype', Variant);
});

// resources/js/components/fieldtypes/Variant.vue

<template>

    <div>
        <p>{{ abc }}</p>
        <!--<text-input :value="value" @input="update"/>-->
    </div>

</template>

<script>
export default {

    mixins: [Fieldtype],

    data() {
        return {
            abc: 33333
        };
    },

    mounted() {
        console.log(this.abc)
    }

};
</script>

Step 4

Loading JS file with statamic

// app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Statamic\Statamic;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Statamic::script('app','cp');
        Statamic::style('app', 'cp');
    }
}

Step 5

npm run watch

NPM runs without errors and looks good

Reproduce bug

Create a blueprint and add the variant field we just created. There is no error in all this.
An error occurred while installing the front-end component.

[smith-bing]

Vue version, changed to 2

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/typography": "^0.5.1",
        "autoprefixer": "^10.4.0",
        "cross-env": "^7.0",
        "css-loader": "^5.2.7",
        "laravel-mix": "^6.0",
        "postcss": "^8.4.5",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.19",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^2.0"
    }
}