选择，v模型更改其他组件的问题

Question

我在vue.js中有这段代码。我简化了该问题的代码。 问题是当我自动更改省份时，  “ selectProCongeFam”也更改。我不知道为什么。

这是代码：

   
   
   const deduction = {!! json_encode($deduction->toArray()) !!};
    const provinces = {!! json_encode($provinces) !!};

    new Vue({
        el: '#app',
        data: function () {
            return {
                
                provinces: provinces,
                province: deduction['province']
                  
            }
        } 
    })

<div class="row">
				<div class="col-xs-12 col-sm-6 col-lg-3 mb-4">
					<div class="form-group">
						<label>Province
							<select class="form-control"
									name="province" id="province" v-model="province">
								<option v-for="(name,value) in provinces" :value="value">
									@{{name}}
								</option>
							</select>
						</label>
					</div>
				</div>
				
				<div class="col-xs-12 col-sm-6 col-lg-3 mb-4">
					<div class="form-group">
						<label for="selectProCongeFam">@lang('form.extFamily')
							<select id="selectProCongeFam" name="proCongeFam"
									class="form-control">
								<option value="0"
										:selected="deduction['proCongeFam'] == 0">@lang('form.no')</option>
								<option value="1" :selected="deduction['proCongeFam'] == 1">@lang('form.yes')</option>
								<option value="2" :selected="deduction['proCongeFam'] == 2">@lang('form.yesbutILD')</option>
								<option value="3" :selected="deduction['proCongeFam'] == 3">@lang('form.AMConly')</option>
							</select>
						</label>
					</div>
				</div>