本人初学vue，最近遇到一个数据加载显示的问题，希望大神指点迷津，以下为相关代码

一个列表el-table捆绑userList用来显示数据：

<el-table :data="userList" v-if="count>0" stripe style="width: 60%;border-radius: 5px;">
      <el-table-column prop="title" label="题目" width="180" />
      <el-table-column prop="userName" label="用户" width="180" />
      <el-table-column prop="datetime" label="时间" />
    </el-table>

组合式js代码如下：

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import api from "@/api/jjy.js";
import Page from '@/components/Page.vue';
let userList = reactive([]);
let count = ref(0);
const get = ()=>{
  let formData = new FormData();
  formData.set("api", "showNews");
  formData.set("messageNum", 10);
  formData.set("start", 1);
  api.getUser(formData)
    .then((res) => {
      userList = JSON.parse(res.data.msg)
      count.value = userList.length;
    })
    .catch((error) => {
      console.log(error);
    });
}
onMounted(() => {
  get();
});
</script>

以上是组合式api中，get函数通过axios获取到数据后更新userList数据，列表显示判断需要v-if="count>0"判断条件，可以显示数据，但是我把js换成选项式api就不需要判断count，只要userList有数据了就可以显示了，我不明白这其中的差异？

以下为改成选项式api后，el-table中v-if="count>0"这个条件就可以不判断了，数据可以直接显示！

<script>
import api from "@/api/jjy.js";
import Page from '@/components/Page.vue';
export default{
    data(){
        return {
            userList:[]
        }
    },
    methods:{
      get(){
          let formData = new FormData();
          formData.set("api", "showNews");
          formData.set("messageNum", 10);
          formData.set("start", 1);
          api.getUser(formData)
            .then((res) => {
              this.userList = JSON.parse(res.data.msg);
            })
            .catch((error) => {
              console.log(error);
            });
        }
    },  
    mounted(){
      this.get();
    });
}