after compiling - ReferenceError: collapsed is not defined

when running the app locally via "npm run dev" everything works as expected. "npm run build" also shows no problem.

But once the compiled app is served, the following error appears:

index.86033c86.js:1 ReferenceError: collapsed is not defined
    at G.onUpdate:collapsed.n.<computed>.n.<computed> (index.86033c86.js:1:80559)
    at wt (index.86033c86.js:1:13159)
    at We (index.86033c86.js:1:13237)
    at We (index.86033c86.js:1:13337)
    at Bl (index.86033c86.js:1:15268)
    at Proxy.u (index.86033c86.js:1:76724)
    at Kc.n.hideToggle.me.onClick.t.<computed>.t.<computed> (index.86033c86.js:1:77822)
    at wt (index.86033c86.js:1:13159)
    at We (index.86033c86.js:1:13237)
    at HTMLButtonElement.n (index.86033c86.js:1:54127)

the menu resizes but the main page doesn't move to follow the collapsed menu. I'have been stuck at this problem for days...

this is App.vue, the menu is loaded here:

<script setup>
import NavBar from "@/components/NavBar.vue";
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
import { h, markRaw } from 'vue'
</script>

<template>
  <sidebar-menu
    v-model:collapsed="collapsed"
    :menu="menu"
    :theme="selectedTheme"
    :show-one-child="true"
    @update:collapsed="onToggleCollapse"
    @item-click="onItemClick"
  />
  <div v-if="isOnMobile && !collapsed" class="sidebar-overlay" @click="collapsed = true" />
  <div id="main" :class="[{'collapsed' : collapsed}, {'onmobile' : isOnMobile}]">
    <NavBar />
    <div class="main">
      <div class="container">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
const separator = {
  template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">'
}

const pushToBottom = markRaw({
  render: () => h('div'),
  mounted () {
    const itemEl = this.$el.parentElement
    itemEl.style.marginTop = 'auto'
  }
})

export default {
  components: {
    SidebarMenu
  },
  name: 'App',
  data () {
    return {
      menu: [
/*        {
          icon: {
            element: "img",
            attributes: {
              src: "/src/assets/company-logo-small-wb.png",
            },
          },
        },
        */
        {
          href: '/',
          title: 'Home',
          icon: 'fa fa-home'
        },
        {
          header: 'Enhanced Visibility',
          hiddenOnCollapse: true
        },
        {
          href: '/cyber-security',
          title: 'Cyber Security',
          icon: 'fa fa-shield-quartered',
          badge: {
            text: 'new',
            class: 'vsm--badge_default'
          },
          child: [
            {
              href: '/cyber-security/documentation',
              title: 'Documentation',
              icon: 'fa fa-file-alt'
            },
            {
              href: '/cyber-security/self-service',
              title: 'Self Service',
              icon: 'fa fa-block-brick-fire',
              //disabled: true
            }
          ]
        },
        {
          href: '/analytics',
          title: 'Analytics',
          icon: 'fa fa-fingerprint',
          //disabled: true
          child: [
            {
              href: '/analytics/dashboards',
              title: 'Dashboards',
              icon: 'fa fa-chart-line'
            },
            {
              href: '/analytics/endpoint-search',
              title: 'Endpoint Search',
              icon: 'fa fa-magnifying-glass-location',
              //disabled: true
            }
          ]
        },
        {
          header: 'Workflows and Automation',
          hiddenOnCollapse: true
        },
        {
          href: '/asset-management',
          title: 'Asset Management',
          icon: 'fa fa-users-gear',
          child: [
            {
              href: '/asset-management/inventory',
              title: 'Hardware Inventory',
              icon: 'fa fa-cart-flatbed-boxes'
            },
            {
              href: '/asset-management/server-boarding',
              title: 'Server Boarding',
              icon: 'fa fa-server'
            },
            {
              href: '/asset-management/equipment-boarding',
              title: 'Equipment Boarding',
              icon: 'fa fa-router'
            }
          ]
        },
        {
          href: '/network-automation',
          title: 'Network Automation',
          icon: 'fa fa-gears',
          child: [
            {
              href: '/network-automation/vxlan',
              title: 'VXLAN-EVPN Fabric',
              icon: 'fa fa-network-wired'
            },
            {
              href: '/network-automation/aci',
              title: 'Cisco ACI',
              icon: 'fa fa-network-wired'
            },
            {
              href: '/network-automation/sdwan',
              title: 'SD-WAN',
              icon: 'fa fa-chart-network'
            },
            {
              href: '/network-automation/meraki',
              title: 'Cisco Meraki',
              icon: 'fa fa-wifi'
            }
          ]
        },
/*        {
          component: markRaw(separator)
        },
*/
        {
          header: 'Documentation',
          hiddenOnCollapse: true
        },
        {
          href: '/ipam',
          title: 'IPAM',
          icon: 'fa fa-location-dot',
          child: [
            {
              href: '/ipam/vlan',
              title: 'Vlan'
            },
            {
              href: '/ipam/vrf',
              title: 'VRF'
            },
            {
              href: '/ipam/prefix',
              title: 'Prefixes'
            }
          ]
        },
        {
          href: '/reports',
          title: 'Reports',
          icon: 'fa fa-file-chart-column',
          disabled: true
        },
        {
        component: pushToBottom
        },
        {
          href: '/settings',
          title: 'Settings',
          icon: 'fa fa-gear'
        }
/*        {
          header: 'Example',
          hiddenOnCollapse: true
        },
*/
      ],
      collapsed: false,
      themes: [
        {
          name: 'Default theme',
          input: ''
        },
        {
          name: 'White theme',
          input: 'white-theme'
        }
      ],
      selectedTheme: '',
      isOnMobile: false
    }
  },
  mounted () {
    this.onResize()
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onToggleCollapse (collapsed) {
      console.log('onToggleCollapse')
    },
    onItemClick (event, item) {
      console.log('onItemClick')
    },
    onResize () {
      if (window.innerWidth <= 767) {
        this.isOnMobile = true
        this.collapsed = true
      } else {
        this.isOnMobile = false
        this.collapsed = false
      }
    }
  }
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');

body,
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  background-color: #f2f4f7;
  color: #262626;
}

#main {
  padding-left: 290px;
  transition: 0.3s ease;
}
#main.collapsed {
  padding-left: 65px;
}
#main.onmobile {
  padding-left: 65px;
}

.sidebar-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 900;
}

.main {
  padding: 50px;
}

.container {
  width: "100%";
}

.v-sidebar-menu .vsm--menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>

yaminncco / vue-sidebar-menu

after compiling - ReferenceError: collapsed is not defined #236