VueJS/Pinia - Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter

[K1Pro]

I am using Vue 3.4.19 along with Pinia. A warning shows up in the console and I have narrowed it down to a few reasons. I would like to eliminate this warning in order to ensure that I follow best practices so this doesn't develop into more serious errors.

**Here is the warning I am getting: **
[Vue warn] Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided.

Here are the pieces of code that I suspect are the culprits:

<template>
  <div class="snackbar">{{ msg.snackBar }}</div>
</template>

<script>
export default {
  name: 'Snackbar',

  computed: {
    ...mapWritableState(useSiteStore, ['msg']),
  },
};
</script>

Here is my Pinia store:

export const useSiteStore = defineStore('site', {
  state: () => {
    return {
      msg: {
        snackBar: '',
        login: '',
      },
    };
  },

When I check the console, this is what it points to:

(function anonymous(exports, require, module, __filename, __dirname, __vsfcl_import__) {
    "use strict";
    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.render = render;
    var _vue = require("vue");
    const _hoisted_1 = {
        class: "snackbar"
    };
    function render(_ctx, _cache, $props, $setup, $data, $options) {
        return (0,
        _vue.openBlock)(),
        (0,
        _vue.createElementBlock)("div", _hoisted_1, (0,
        _vue.toDisplayString)(_ctx.msg.snackBar), 1);
    }
}
)

I appreciate any insight and help with this in advance. thank you.

Here is a link to a live app that shows the warning in the console: https://test.k1pro.net/

I simply tried to isolate the problem and followed the console to the origin of the problem, but I am not sure how to fix the warning or perhaps best-practice in this regard.