Does vue composition api "ref or reactive" working deeply reactive on template?

I am using Vuejs Composition Api for my component, and used both reactive and ref for my data.

Based on https://vue-composition-api-rfc.netlify.com/api.html#ref they should be working on deep side of the object which has been passed to them and made them reactive.

I am currently facing a problem which seems the template not reloading after the data has been changed or maybe it seems that it is not reactive.

As you can see in onMounted hook, the data will be fetched and it will show without any problem in the Table compoenent, but the pre-selected-records which is been loaded before datatable will not be updated

until i used assignedList.length in :key to force it to re-render it.

I wonder where did i mistake. and i am really confuesd about how are these working and how should we used them? here is the code:

<template>
      <Table
        :key="assignedList.length"
        :table="dataTable"
        :pre-selected-records="assignedList"
      />
</template>

<script lang="ts">
import {
  createComponent,
  onMounted,
  PropType,
  ref
} from "@vue/composition-api";
import { DataTable } from "@/mixins/Helpers/DataTableHelper/DataTable.Helper.mixin";
import { Device} from "@/types";
import {
  api_fetchAssignedProfilesToDevice
} from "@/api/api_device";
import Table from "@/views/components/Table.vue";
import {
  mocked_assign_tableKeys,
  mocked_assign_tabs
} from "@/api/mock/assign.mock";

export default createComponent({
  name: "Assignment",
  components: {
    Table
  },
  props: {
    page: {
      type: String,
      default: "device",
      required: true
    },
    target: {
      type: Object as PropType<Device | Group>,
      required: true
    }
  },
  setup(props, context) {
    const tableKeys: { [index: string]: any } = mocked_assign_tableKeys(
      context.root.$locale
    );
    const dataTable = ref(
      new DataTable(tableKeys.profile.th, tableKeys.profile.td) as DataTable
    );
    const assignedList= ref([]);
    onMounted(async () => {
        let { assignable, assigned } = await api_fetchAssignedProfilesToDevice(
        props.target.id
      );
      await dataTable.value.fetchTableList(async () => [
        ...assignable,
        ...assigned
      ]);
      assignedList.value =assigned;
    });
    return {
      dataTable,
      assignedList,
    };
  }
});
</script>

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