Trying to use v-model and v-show on radio buttons to show different divs (Vue and Laravel) - laravel

Question

I'm trying to make different divs show up according to the selected radio button option using v-model and v-show but, even though they stay hidden when the page is loaded as they should, they don't show up when a radio button is selected.
This code is a Vue component inside of a Laravel project. When I try this same code on https://jsfiddle.net/, using only Vue, it works exactly how it should. But when I try it inside my Laravel project, it doesn't work.
Component's HTML (don't mind the id and name values):
<div id="app">
<div>
<span><strong>*</strong> options </span>
<div>
<input type="radio" id="grerjSim" name="grerj" value="showYes" v-model="showOption">
<label for="grerjSim"> yes </label>
</div>
<div>
<input type="radio" id="grerjNao" name="grerj" value="showNo" v-model="showOption">
<label for="grerjNao"> no </label>
</div>
<div v-show="showOption === 'showYes'">
<span><strong>*</strong> Lorem ipsum dolor sit amet. </span>
<input type="text" required>
</div>
<div v-show="showOption === 'showNo'">
<label for="grerjMotivo">No
<select id="grerjMotivo">
<option>Lorem ipsum dolor sit amet.</option>>
</select>
</label>
</div>
</div>
</div>
Component's JS:
<script>
new Vue({
el: '#app',
data: {
showOption: value=""
}
})
</script>
Any help would be great :)

Answer 1

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.