Problem mit Reaktivität bei einer Vue in Vue.js

[pkm]

Ich lerne gerade Laravel in Verbindung mit Vue.js.

Dabei habe ich eine Vue, die ich an folgender Stelle einbinde: <div id="app">

@extends('layouts.layout')

        @section('content')
        <div class="default-textfield">
              
             <div>Pizzas as fetched with axios:</div>   
                                        
                     <div id="app">
                       <div class="container"> 
                         <articles></articles>
                       </div>
                    </div>
                
                   <script src="{{ asset('js/app.js') }}"></script>
    
        </div>
        @endsection

Im public-Ordner meines Laravelprojekts habe ich eine Datei app.js, und mit new Vue(... erstelle ich dort die Vue, welcher ich eine Methode namens "ordered", was man im folgenden Code sehen kann:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');


window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('articles',
require('./components/Articles.vue').default
);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
    methods : {
    ordered : function() { //Ich kann irgendwie von der Komponente aus diese Funk nicht aufrufen.
                  
              axios.get('http://localhost/project/public/pizzas/1').then(resp => {

              alert('test');

              return JSON.stringify(resp.data);

});               
    }
     }
});

Im Template namens Articles.vue möchte ich mit {{ ordered() }} die ordered-Funktion aufrufen.

Nun habe ich ein Problem mit der Methode "ordered", denn es heißt:

Property or method "ordered" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Wenn ich in app.js ein data-JSON-Objekt anlege im Konstruktor von Vue, wo ich ordered: null definiere, dann bringt das leider nichts.

Daher dachte ich - falls es hier Laravel/Vue-Profis gibt, vielleicht können die mir ja einen Tipp geben, wie ich das richtig coden soll, denn aus gugel und der Vuedokumentation bin ich nicht so richtig schlau geworden.

Hier ist die Struktur: