vue3中使用return语句返回this.$emit()，在同一行不执行,换行后才执行，好奇怪！

今天练习TodoList任务列表案例,该案例效果如图所示：

此案例除了根组件App.vue，还有TodoList、TodoInput、TodoButton三个子组件。

因为有视频讲解，在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。
在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。
下面是TodoButton.vue组件的完整代码。

<template>
    <div class="mt-3 btn-container">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn" :class="active === 0 ? 'btn-danger' : 'btn-secondary'"
                @click="onBtnClick(0)">全部</button>
            <button type="button" class="btn" :class="active === 1 ? 'btn-danger' : 'btn-secondary'"
                @click="onBtnClick(1)">已完成</button>
            <button type="button" class="btn" :class="active === 2 ? 'btn-danger' : 'btn-secondary'"
                @click="onBtnClick(2)">未完成</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'TodoButton',
    emits: ['update:active'],
    props: {
        active: {
            type: Number,
            required: true,
            default: 0,
        },
    },
//return 和后面的语句this.$emit('update:active', index)在同一行的话，不执行

    methods: {
        onBtnClick(index) {
            if (index === this.active) return this.$emit('update:active',index)
        },
    },
}
</script>
<style scoped >
.btn-container {
    width: 400px;
    text-align: center;
}
</style>

经过一番排错，发现问题出在methods部分。

     methods: {
        onBtnClick(index) {
            if (index === this.active) return this.$emit('update:active',index)
        },
    },

上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。

    methods: {
        onBtnClick(index) {
            if (index === this.active) return
            this.$emit('update:active',index)
        },
    },

我试了好几次，都是如此。
真是奇怪！我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。

为什么到了 this.$emit(‘update:active’,index)这里就必须从return后换行才可以呢？