Dayjs with Nuxt/Vue: Button to change timezone - vue.js

Question

I've been tinkering around with a booking system using dayjs. Currently it imports objects with a DateTime in the 'Australia/Melbourne' timezone, and I'm looking to make a dropdown that changes the timezone that it's currently being displayed in. However, I haven't had any luck getting the display to change. I've even got it to reload the component, but it doesn't seem to do the trick.
Component that will change the timezone:
<div>
<button #click="changeTimezone('SA')" >
Set timezone to Adelaide
</button>
<button #click="changeTimezone('WA')" >
Set timezone to Perth
</button>
<button #click="changeTimezone('NSW')" >
Set timezone to Sydney
</button>
<div><span>data timezone</span>{{ currentTimeZoneOutput }}</div>
<div><span>computed timezone</span>{{ computedTimeZoneOutput }}</div>
</div>
Script:
export default {
data() {
return {
currentTimeZoneOutput: this.$dayjs(Date.now()).format("h:mm:ss A"),
};
},
methods: {
changeTimezone(state){
this.$store.commit('SET_TIMEZONE', state)
this.$dayjs.tz.setDefault(this.$store.state.timezone)
},
forceRerender(){
this.$emit("forceRerender");
}
},
computed: {
computedTimeZoneOutput (){
return this.$dayjs(Date.now()).format("h:mm:ss A")
}
}
}
The store mutation:
SET_TIMEZONE: (state, newTimezone) => {
switch(newTimezone){
case 'NT':
state.timezone = 'Australia/Darwin'
break;
case 'WA':
state.timezone = 'Australia/Perth'
break;
case 'VIC':
state.timezone = 'Australia/Victoria'
break;
case 'QLD':
state.timezone = 'Australia/Brisbane'
break;
case 'NSW':
state.timezone = 'Australia/Sydney'
break;
case 'ACT':
state.timezone = 'Australia/Canberra'
break;
case 'TAS':
state.timezone = 'Australia/Tasmania'
break;
case 'SA':
state.timezone = 'Australia/Adelaide'
break;
default:
state.timezone = newTimezone
}
console.log('Timezone is now: ' + state.timezone)}
Something tells me I'm not actually able to change the timezone dynamically. If anyone could point me in the right direction that would be great, cheers.

Answer 1

You need to use mapState in this situation:
Script
import { mapState } from 'vuex'
export default {
data() {
return {
currentTimeZoneOutput: this.$dayjs(Date.now()).format("h:mm:ss A"),
};
},
methods: {
changeTimezone(state){
this.$store.commit('SET_TIMEZONE', state)
this.$dayjs.tz.setDefault(this.timezone) // EDITED
},
/**
* No need for this. By force re-rendering you run data() again
* too. So it will be the same each time.
*/
/* forceRerender(){
this.$emit("forceRerender");
} */
},
computed: {
...mapState(['timezone'])
}
}
Now inside your template use timezone from computed property.
...
<div><span>data timezone</span>{{ timezone }}</div>
A very good explanation about mapState is in this link.

Answer 2

Okay turns out - needed to add UTC to the dates first.
So instead of (for example):
this.$dayjs(Date.now()).tz("America/New_York").format("h:mm:ss A")
It becomes:
this.$dayjs.utc(Date.now()).tz("America/New_York").format("h:mm:ss A")
Now my dates are finally reactive!