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
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.