关于computed、watchEffect及响应式数据

computed计算属性，是当依赖的数据发生变化时会自动执行，象下面这段代码

const caculations = computed(() => {        
        let result = {
            sumNum: 0,
            sumPrice: 0,
            goodsList: {},
            purchaseList:[],
            shopName:"",
            isCartAllSelect: true
        };
        result.goodsList = cartList[shopId]?.goodsList;
        result.shopName = cartList[shopId]?.shopName;        
        if (result.goodsList) {
            for (let i in result.goodsList) {
                const goods = result.goodsList[i];
                result.sumNum += goods.count;
                if (goods.check) {
                    result.sumPrice += goods.count * goods.price;
                }
                if (goods.count > 0 && !goods.check) {
                    result.isCartAllSelect = false;
                }
                if(goods.count > 0 && goods.check ){
                    result.purchaseList.push(goods);
                }
            }
        }
        result.sumPrice = result.sumPrice.toFixed(2);
        return result;
    });

因此，它里面的变量不需要定义成响应式数据，通过计算属性得到的caculations已经有了响应式数据的功能，是这样吗？

而watchs是监听数据，当某个数据发生变化时，会重新执行函数？

那么，用ref或reactive定义的响应式数据呢？当它所依赖的数据发生变化时，也会重新执行相应函数重新得到吗？ref或reactive主要应用在什么场景？我学习的课程里，好像所有通过ajax得到的接口数据，都定义为ref或reactive，这是为什么？

下面这段代码：

const useCurrentListEffect = (currentTab, shopId) => {
    // const data = reactive({ contentList: [] });
    const contentList = ref([]);
    const getContentData = async () => {
        const shop_id=shopId.slice(1)
        axios.defaults.baseURL ="http://localhost:3000";
        axios.defaults.withCredentials=true;
        await axios
            .get(`/api/shop/${shop_id}/goods`, {
                params: { tab: currentTab.value }
            })
            .then(res => {
                if (res.data.errno == 0 && res.data.data) {
                    contentList.value = res.data.data;
                }
            })
            .catch(err => {
                console.log(err);
            });
    };
    watchEffect(() => {
        getContentData();
    });
    // const { contentList } = toRefs(data);
    return { contentList };
};

已经将获取接口数据的变量contentList定义成了响应式数据，那么，不是接口数据变化时，contentList会重新获取到数据吗？还是说，定义为响应式数据，只意味着它是可变的（那么，这和变量也有何区别？），并不会在后端数据发生时重新获取数据？因此需要使用watchEffect来监听数据的变化？那么，watchEffect可以实现，当后端数据发生变化时，自动重新执行函数获取数据？

我一直搞不太懂用ref或reactive定义的响应式数据到底起什么作用？怎么起作用的？

请老师帮忙解答一下以上问题，谢谢！