Laravel 7 und externe Komponenten VueJS

HI!

ich beginne gerad Laravel und Vuejs zu lernen da meine SpagehttiCode Projekte inzwischen den Umfang haben den ich allein nicht mehr überblicken kann.

Also habe ich begonnen ein bestehendes Projekt auf Laravel neu zu erstellen.

Da ich von Jquery komplett weg will setze ich auf VueJs - welches in den Tutorials auf udemy etc. "einfach" erschien, sowie sehr viele Komponenten schon da sind welche ich verwenden könnte - wenn ich denn wüsste wie. So ein wirklich brauchbares Tutorial wie man denn eine externe Komponente in Laravel benutzt habe ich noch nicht wirklich gefunden - sollte eine/r von euch hier wissen wo dann bitte her damit

Mein Problem ist komplett trivial ich renne aber ständig gegen Mauern die ich einfach nicht einreissen kann.

Ich möchte erstmal den Laravel Grundstock aufbauen und mein Wissen erweitern und festigen deshalb habe ich begonnen eine Nutzerverwaltung zu bauen soweit so gut. beim erstellen des Nutzers soll noch eine Firma ausgwählt werden können - welche in der DB hinterlegt ist. Also einfach ein Dropdown mit Suchfunktion als vuejs Komponente suchen und einbinden .. so war mein Plan.

Am Ende bin ich bei https://vue-multiselect.js.org/#sub-select-with-search gelandet.

Nachdem ich die ersten grossen Hürden dank Stackoverflow umschiffen konnte, komme ich nun aber dennoch nicht weiter.

Was ich habe / gemacht habe:

Ich nutze Laragon -> dort im Terminal npm install Vuejs-multiselect wie in den Docs zur Komponente beschrieben.

Danach: in meiner app.js:

Vue.component('v-multiselect', require('./components/Multiselect.vue').default);

meine eigene Komponente registriert, die so aussieht:

Multiselect.vue im Components Ordner:

<!-- Vue component -->
<template>
<div>
<multiselect v-model="selected" :options="options" ></multiselect>
</div>
</template>

<script>
import Multiselect from 'vue-multiselect'
// register globally
Vue.component('multiselect', Multiselect)
export default {
// OR register locally
components: { Multiselect },
props: {
options: {},
placeholder: {
default: 'Select one'

},

showLabel: {
type: Boolean,
default: true

},
selected: null
},
data () {
return {
value: null,
//options: ['option1','option2','option3']
}
}

}

</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

im Blade File den Aufruf der Komponente so getätigt:

 <v-multiselect  :selected.sync="selected" name="books[]" label="name" :options="['one','two','three']" ></v-multiselect>

Das Select erscheint ich kann auch suchen, doch Vuejs Warnt das ich doch bitte keine Props direkt ändern soll - da die Werte überschrieben werden wenn die Komponente sich ändert.

index.js:133 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected"

found in

---> <VMultiselect> at resources/js/components/Multiselect.vue
       <Root>
warn @ index.js:133

Alles schön und gut doch denke ich fehlt mir zu so einem trivialen Problem (Dropdown mit Suche das eigentlich schon fertig ist) jeglicher rote Faden. bzw. fehlen mir denke ich momentan noch ein paar Zusammenhänge.

Meine Fragen sind:

- wenn ich eine Komponente von extern benutzen möchte und diese auch mehrmals in meinem Projekt gebrauchen kann - macht man das so im Normalfall wie ich es tat?

(importieren, daraus eine eigene Komponente erstellen und diese dann in Laravel benutzen?)

Wenn man das nicht so handelt dann gebt mir bitte mal einen Anstoss wie es richtig wäre.

- Wie kann ich mein Problem mit der Parent -> child Komponente jetzt lösen bzw. gibt es jemanden da draussen der das Multiselect schon erfolgreich in Laravel+Vue benutzt ?

- selbst wenn ich die Warnung ignoriere die mir VueJs da ausspuckt -> nachdem senden des Formular steht leider nichts im $request d.h. mir fehlt irgendwie der Bezug Komponente in VueJS zu meinem Formular?

So ich musste etwas weiter ausholen damit ihr grob wisst auf welchem Stand ich mich bewege und was ich am Ende erreichen möchte.

Danke an alle hier die Laravel ein wenig eindeutschen macht bitte weiter so!