Why is v-if not working with v-model in this example? - vue.js

Question

I have a form where I am trying to switch between province or state depending on the country chosen in a select box. In my DB Canada = 001 and USA = 002. Here is my code:
<form action="{{ route('store') }}" method="post" id="vueApp" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="col-md-12 mb-4">
<label for="student[country]">Country</label>
<select class="form-control form-control-sm col-md-6" id="student[country]" name="student[country]" v-model="country">
<option value selected>None</option>
#foreach($countries as $code => $description)
<option value="{{ $code }}">{{ $description }}</option>
#endforeach
</select>
</div>
<div v-if="country == '001'" class="col-md-12 mb-4">
<label for="student[province]">Province</label>
<select class="form-control form-control-sm col-md-6" id="student[province]" name="student[province]">
<option value>None</option>
#foreach($states_provinces->where('xcomment', 'Canada')->pluck('short_desc', 'state_code') as $code => $description)
<option value="{{ $code }}" {{ old('student.province') == $code ? 'selected' : '' }}>{{ $description }}</option>
#endforeach
</select>
</div>
<div v-else-if="country == '002'" class="col-md-12 mb-4">
<label for="student[province]">State</label>
<select class="form-control form-control-sm col-md-6" id="student[province]" name="student[province]">
<option value selected>None</option>
#foreach($states_provinces->where('xcomment', 'USA')->pluck('short_desc', 'state_code') as $code => $description)
<option value="{{ $code }}" {{ old('student.province') == $code ? 'selected' : '' }}>{{ $description }}</option>
#endforeach
</select>
</div>
<div v-else>
<input type="hidden" class="form-control form-control-sm col-md-6" id="student[province]" max="255" name="student[province]" value="">
</div>
</form>
<script>
(function(){
var $country = '{{ old('student.country') }}';
var app = new Vue({
el: '#vueApp',
data: {
country: $country === '' ? '001' : $country,
},
});
</script>
It shows both province and state in the form no matter which country is chosen. Nothing changes, any help would be gladly appreciated! I did previously have an error, "Uncaught TypeError: Vue is not a constructor", but I was able to remove that error by removing the '$' before (function()) after the script tag. Still the same result, looks like it isn't recognizing my vue directives.
Result