从父级无法更新子级组件的计算属性

Question

我想从父组件中单击一个按钮，该按钮允许我在子组件中编辑计算值。

我的组件：

<template>
    <div height="90vh">
        <child-component
            ref="chartGridSelection"
        />
    </div>

    <div>
        <v-divider class="mt-4 mb-4"></v-divider>
        <v-row justify="end">
            <v-btn @click="methodToClearVariableInChild">Create</v-btn>
        </v-row>
</div>
<template>

链接到上述v-btn的父组件方法：

methodToClearVariableInChild() {
    this.$refs.chartGridSelection.computedValName == '';
}

子组件的计算值：

computedValName: {
    get(){
        var createDiv = document.createElement('div');
        var randomStringAsClassNames = Math.random().toString(36).substring(7);
        return createDiv.className = 'div_' + randomStringAsClassNames;
    },
    set(newValue){
        return newValue = ''
   } 
},

到目前为止，我还没有遇到任何错误，但是它没有按预期的那样工作，因为单击v-btn时应该调用methodToClearVariableInChild，因此将this。$ refs.chartGridSelection.computedValName等于一个空字符串。但是，它不会清除计算值名称计算值。

我可能做错了什么？