Vuetify 扩展面板使用 sessionStorage 设置值并且不触发观察者

Question

我从父组件扩展道具传递为真。 在我的组件中，我有一个 v-model="panel" 的扩展面板 vuetify 组件

  <v-expansion-panels
    :focusable="!totalCount > 0"
    v-model="panel"
    multiple
    v-if="!isLoading"
  >

我在这里声明我的道具

  props: {
    expand: Boolean,
  }

在我的数据中，我使用一个带有索引的数组来打开或关闭我的面板（我只有一个）

panel: this.expand ? [0] : [1],

我想要实现的是存储用户选择是否展开此面板，当他第一次登陆页面时，它应该展开，但是当他在应用程序上导航时，他决定在返回时折叠面板面板仍然折叠。

但是因为我希望用户每天都能看到扩展面板，所以他的选择应该在 12 小时后被删除。

所以我决定使用 sessionStorage 并存储一个日期，并在安装组件时检查我的日期是小于还是大于设置选择的时间

  mounted: function () {
    this.getTimesheetsKpis();
    if (sessionStorage.getItem("analyticsSession") !== null) {
      var analyticsSession = JSON.parse(
        sessionStorage.getItem("analyticsSession")
      );
      var currentDate = moment(new Date());
      var sessionDate = analyticsSession.date;

      var duration = moment.duration(currentDate.diff(sessionDate));
      var hours = duration.asHours();
      console.log("hours", hours);
      var secs = duration.asSeconds();
      console.log("secs", secs);

      if (secs > 45 /* hours >= 12 */) {
        console.log("session expired");
        sessionStorage.removeItem("analyticsSession");
      } else {
        this.panel = analyticsSession.panel;
      }
    }
  },

在我的方法中，我使用 function 来设置 session 存储项

    setSessionStorage() {
      console.log("session storage function triggered");
      var today = moment(new Date());
      var analyticsSession = {
        date: today,
        panel: this.panel,
      };

      sessionStorage.setItem(
        "analyticsSession",
        JSON.stringify(analyticsSession)
      );
    },

我观察面板 state 是否更改以触发 function

  watch: {
        panel: {
      handler(newVal, oldVal){
        console.log(oldVal.length, newVal.length)
        
        if(oldVal.length !== newVal){
          console.log("panel watcher", newVal, oldVal);
      this.setSessionStorage();
        }

      }
    },

我的问题是，每次我导航回该组件时，观察者都会触发并触发setSessionStorage function 我猜这是因为扩展值设置为 true，并且观察者将与该值进行比较。

我怎样才能避免这种情况？