如果 setInterval 是通过 vue2 中的父组件的 ref 调用的，如何清除 clearInterval？

Question

我有一个父级，我在其中调用带有 ref 的函数 startTimer()，我想直接在子组件中停止此 Timer，但这不起作用。我在某处读到 setInterval 中的箭头函数可能会产生问题，但它对我没有影响，所以我继续使用箭头函数。

父组件

<template>
    <child-component ref="child" />
    <button @click="startTimer">Start Timer</button>
</template>
<script>
export default {
    components: {
        ChildComponent
    },
    methods: {
        startTimer() {
            this.$refs.child.startTimerInChild()
        }
    }
}
</script>

子组件

<template>
    <button @click="stopTimer">Stop Timer</button>
</template>
<script>
export default {
    methods: {
        startTimerInChild() {
            this.timer = setInterval(() => {
                doSomethingEveryTwoSeconds();
            }, 2000);
        },
        stopTimer() {
            clearInterval(this.timer)
        }
    },
    data() {
        return {
            timer: null
        }    
    }
}
</script>

（我在这个项目中仍然使用Vue2，不知道这是否重要）

我发现的唯一类似问题是这个，但我找不到适合我的场景的解决方案： setInterval 在子组件方法上调用，并在父组件中引用子组件