Costom Vue Field not called fill method in Laravel Nova

I created new fields but when I try to update my resource method "fill" not working. This method is not even called. My component looks like this

<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">
            <belongs-to
                v-for="(resource, key) in selectedResources"
                :key="key"
                :bidResouce="resource"
                :resourceName="field.resourceName"
                :associable="field.associableRelationship"
                :field="field"
                v-model="selectedResources[key]"
                @click="selectBid"
            >

            </belongs-to>
        </template>
    </default-field>
</template>

<script>
    import { FormField, HandlesValidationErrors } from 'laravel-nova'
    import BelongsTo from "./BelongsTo";

    export default {
        components: {BelongsTo},
        mixins: [FormField, HandlesValidationErrors],

        props: [
            'options',
            'resourceName',
            'resourceId',
            'field'
        ],

        data: () => ({
            availableResources: [],
            search: '',
            selectedResources: [],
            resourcesCount : 5
        }),se{
                    this.selectedResources = this.field.options;
                }
            },

            /**
             * Fill the given FormData object with the field's internal value.
             */
            fill(formData) {
                console.log('test')
                console.log(formData)
                formData.append(this.field.attribute, this.selectedResources || '')
            },

            /**
             * Update the field's internal value.
             */
            handleChange(value) {
                this.value = value
            },

            selectBid(resourceValue){

            }

        },

        computed: {

            defaultValues(){
                let data = {};
                for(let i =0; i< this.resourcesCount; i++ ){
                    data[i] = null;
                }
                return data;
            },

            countSelected(){
                let countNotEmptyItems = 0;
                for (let key in this.selectedResources){
                    if(!!this.selectedResources[key]){
                        countNotEmptyItems += 1;
                    }
                }
                return countNotEmptyItems;
            }
        },
        watch: {
            countSelected(newCount){
                if(newCount >= this.resourcesCount){
                    this.resourcesCount++;
                    this.selectedResources = Object.assign(this.defaultValues, this.selectedResources);
                }
            }
        }
    }
</script>

        methods: {
            /*
             * Set the initial, internal value for the field.
             */
            setInitialValue() {
                let optionsSize = _.size(this.field.options);

                if(optionsSize < this.resourcesCount){
                    this.selectedResources = Object.assign(this.defaultValues, this.field.options);
                }else{
                    this.selectedResources = this.field.options;
                }
            },

            /**
             * Fill the given FormData object with the field's internal value.
             */
            fill(formData) {
                console.log('test')
                console.log(formData)
                formData.append(this.field.attribute, this.selectedResources || '')
            },

            /**
             * Update the field's internal value.
             */
            handleChange(value) {
                this.value = value
            },

        },

        computed: {

            defaultValues(){
                let data = {};
                for(let i =0; i< this.resourcesCount; i++ ){
                    data[i] = null;
                }
                return data;
            },

            countSelected(){
                let countNotEmptyItems = 0;
                for (let key in this.selectedResources){
                    if(!!this.selectedResources[key]){
                        countNotEmptyItems += 1;
                    }
                }
                return countNotEmptyItems;
            }
        },
        watch: {
            countSelected(newCount){
                if(newCount >= this.resourcesCount){
                    this.resourcesCount++;
                    this.selectedResources = Object.assign(this.defaultValues, this.selectedResources);
                }
            }
        }
    }
</script>

Plase note that component this is also my custom component. The documentation states that

Before creating or updating a resource, Nova asks each field on the form to "fill" the outgoing FormData object with key / value pairs. Each field may add as many elements to the FormData as needed. This may done in your FormField.vue file's fill method.

via Chebli Mohamed