localStorage-based data property get/set issue when using a mixin

I have a situation where I need to use localStorage to hold the state of the user’s current theme (light or dark). Because localStorage is not reactive, I’m using a getter and setter in the data object. It works well if I keep everything in App.vue, but if I offload the isDark property to a mixin that is associated with App.vue, isDark no longer works.

I thought that mixins get ‘mixed in’ with other components and behave in an integrated way. What am I missing? Here’s a codepen illustrating the issue. Thanks for your help.


By way of additional explanation…

The top button demonstrates correct functionality when the data property is in a component or in the root of the Vue instance. Toggling it changes localStorage.is_dark from true to false. This can be observed by monitoring the “Actual localStorage value” line in both the top and bottom sections as an alternative to opening dev tools and viewing it in the Application tab.

The bottom button demonstrates broken functionality when the data property is instead placed in the data function of a mixin. localStorage.is_dark never changes when the bottom button is toggled.

For both buttons, there is a “Vue isDark (or isDarkMixin) prop value” line to observe that toggling either button does have an effect on the data properties themselves. It’s just that when placed in a mixin, the localStorage variable doesn’t work if toggled from a mixin.

To my mind, a property in the data function of a mixin should behave identically to one in the data function of a component or Vue root. I’m trying to discover why this is, or if it might possibly even be an unintended behavior in Vue itself.