nova-field.vue

<template>
    ...
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
    mixins: [FormField, HandlesValidationErrors],

    components: { },

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

    data: () => ({
        selectedWebinarId: null,
    }),

    methods: {
        ...
      
        findWatchableComponentAttribute(component) {
            let attribute;
            switch(component.field.component) {
                case 'belongs-to-many-field':
                case 'belongs-to-field':
                    attribute = 'selectedResource';
                    break;
                case 'morph-to-field':
                    attribute = 'fieldTypeName';
                    break;
                default:
                    attribute = 'value';
            }
            return attribute;
        },

        getComponentByField(component, fieldName) {

            if (component.field && component.field.attribute === fieldName) {
                return component;
            }

            let result, child;

            if (component.$children.length) {
                for (child of component.$children) {
                    result = this.getComponentByField(child, fieldName);
                    if (result) {
                        return result
                    }
                }
            }
        },

        loadWebinarPrices(webinarId) {
            this.selectedWebinarId = webinarId

            // TODO: ajax load nomenclature
        }
    },

    mounted() {
        let webinarField = this.getComponentByField(this.$root, 'webinar')
        let attribute = this.findWatchableComponentAttribute(webinarField)

        webinarField.$watch(attribute, option => {
            this.loadWebinarPrices(option.value)
        })
    }
}
</script>