Filtering with substrings and watching for change but no update - vue.js

Question

I am working with substrings and watchers in vuejs. I have an issue. In my data model, I will end up having about 20 states that all have a code added to each of them. I filter out the code to just the first letters--that way I should be able too write some conditional render that will display the state name which would be indicative of the code. For instance if I have NY9830 OR NY83793, the substring cuts it down to just NY and I am trying to make the text update to New York. Its not updating and I added a watch to the v-model. I will have like 20 conditions for different states so, the easiest way to do this would be helpful.
new Vue({
el: "#liveapp",
data: function() {
return {
Office: 'NY006 '
}
},
methods: {
},
watch: {
stateValue: function() {
if (this.office == "NY") {
alert("display New York");
this.stateValue = "New York";
} else if (this.office == "LA") {
alert("display Louisiana");
this.stateValue = "Louisiana";
}
}
},
filters: {
liveSubstr: function(string) {
return string.substring(0, 2);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="liveapp">
<h2>Todos:</h2>
<p v-model="stateValue">{{ Office | liveSubstr}}</p>
</div>

Answer 1

If I'm reading your question correctly, what I think you want is a filter that can transform an office code like "NY9830" into a full state name like "New York".
You can back the filter with a map of state abbreviations to full-names. For example
const states = new Map([
['NY', 'New York'],
['LA', 'Louisiana'],
['TX', 'Texas']
])
Vue.filter('state', value => {
return states.get(value.substring(0, 2)) || 'Unknown'
})
new Vue({
el: '#app',
data: () => ({ offices: [] }),
created() {
// simulate remote request
setTimeout(() => {
this.offices = ['NY9830', 'NY83793', 'LA7474', 'TX0894']
}, 1000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<ul>
<li v-for="office in offices" :key="office">
{{ office }} - {{ office | state }}
</li>
</ul>
</div>