Nova Tool: Passing async data from database using a route defined in the Tool's "api.php" to a v-model in Vue.JS

Question

I have created a Laravel 8 custom Tool. It contains two inputs. For example: <input v-model="month_price" name="month_price" id="month_price" type="text" class="w-full form-control form-input form-input-bordered" />.

In the Vue.JS file I have set this data function:

<script>
export default {
    metaInfo() {
        return {
          title: 'Appprices',
        }
    },

    data: function () {
        let vue = this;

        Nova.request().get('get_app_prices')
        .then(response => {
            vue.month_price = response['month_price'];
            vue.year_price = response['year_price'];
        });
    },

}
</script>

It should call my Nova's Tool's api.php routing file's route get_app_prices, defined by:

Route::get('/get_app_prices', function (Request $request) {
    return ['year_price' => 12, 'month_price' => 24];   
})->name('get_app_prices');

However I don't see "12" nore "24" in my inputs. No error is returned. What is the problem?

Edit (Partial Solution):

The correct URL was Nova.request().get('/nova-vendor/appprices/get_app_prices_values'). Now I correctly have the good values returned by my PHP code. However the fields are still not filled and I don't understand why.

Answer 1

The following script works:

<script>
export default {
    metaInfo() {
        return {
          title: 'Appprices',
        }
    },

    data() {
        return {
            month_price: 0,
            year_price: 0,
        }
    },

    created() {
            this.getDataFromApi()
     },

    methods: {
        
        getDataFromApi() {
            Nova.request().get('/nova-vendor/appprices/get_app_prices_values')
            .then(response => {
                this.month_price = response.data.month_price;
                this.year_price = response.data.year_price;
            });
        }
        
    }

}
</script>