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

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