我遇到了一个问题，我试图使用新的组合API将对象属性绑定到Vue中的ref。我期望模板在设置ref值后使用新值重新渲染，但我得到的却是RefImpl {}。我该怎么解决这个问题？

<template>
  <v-card>
   <v-card-text class="pa-2">
     <div v-for="(social, index) in socials" :key="index">
       <p>{{ social.value }}</p>
     </div>
   </v-card-text>
  </v-card>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api/dist/vue-composition-api";

export default {
  setup() {
    const testVariable = ref(0);

    const socials = [
      {
        value: testVariable,
      }
    ];

    onMounted(() => {
      setTimeout(() => testVariable.value = 100, 1000);
    });

    return {
      socials,
    }
  },
}
</script>
<style scoped></style>

字符串