Vuesax checkbox does not work on custom modal

I am using vuesax 3.9.0 framework as base for the platform i am making, i am having a problem where i need to use checkbox inside a modal, i used the vs-popup component that vuesax offers and it worked without problem.

<vs-popup
    :title="title"
    :show="show"
    @close="closeModal"
  >
    <vs-row class="mt-8" :key="`permission-${index}`" v-for="(permission, index) in permissions">
      <vs-col vs-type="flex" vs-justify="flex-end" vs-align="center" vs-w="3">
        <vs-checkbox  
          :disabled="currentUser.permissions['root']"
          @input="canSave = true" 
          :vs-value="permission" 
          v-model="permissionsSelected" 
          class="mr-10" 
        />
      </vs-col>
    </vs-row>
  </vs-popup>  

I needed to use a custom modal instead of the vs-popup so i made one and it worked in every other form but when i try to click the checkbox, it does nothing, the checbkox does not emit events or input. that was the only change.

<modal
    :title="title"
    :show="show"
    @close="closeModal"
      >
    <vs-row class="mt-8" :key="`permission-${index}`" v-for="(permission, index) in permissions">
      <vs-col vs-type="flex" vs-justify="flex-end" vs-align="center" vs-w="3">
        <vs-checkbox  
          :disabled="currentUser.permissions['root']"
          @input="canSave = true" 
          :vs-value="permission" 
          v-model="permissionsSelected" 
          class="mr-10" 
        />
      </vs-col>
    </vs-row>
  </modal>  

this is the modal component

<template>
  <transition name="fade">
    <div class="overly position-fixed" v-show="show">
      <div class="dialog position-absolute">
        <vs-card>
          <div slot="header" class="card-header position-relative">
            
            <slot name="button"></slot>
            <button class="close-button" @click="$emit('close')">
              <i class="material-icons">close</i>
            </button>
          </div>
          <slot>
          </slot>
        </vs-card>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="scss" scoped>
  // styles
</style>

What could be the problem?

do i need to manually update the checkbox so they start working? why does it work with the vs-popup but not with my modal?