0đź‘Ť
I noticed that your Vue-related JavaScript is inside its own <script> tag, which I assume means you’re writing the Vue code in your Blade template.
While you can get Vue apps working that way, it’s easier to manage if you keep your JavaScript contained in the source files located in resources/js. There is even an example already there for you to customize.
Also, when I asked if you checked your console for any errors, I meant your web browser’s developer tools console. If you haven’t checked that yet, it may hold a very obvious clue in the form of a specific error.
Here are a couple errors that your console might have:
ReferenceError: Vue is not defined
This means you added the Vue app code (new Vue({ ... })), but no other JavaScript including the Vue library, so the code doesn’t know what Vue is.
[Vue warn]: Property or method “showOption” 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.
If you tried to fix the undefined Vue error above by running Laravel Mix and adding a <script> tag for the built file, you might see this. That’s because the default Mix source code has an example Vue app targeting #app already, so the two are conflicting and the one in app.js is winning.
You’ll either want to remove your Blade file Vue app and customize the default one in app.js (recommended), or remove the app.js one and keep the Blade file.
Official documentation on using Laravel Mix with JavaScript.