Vue组件中的Vue组件，范围似乎存在冲突

Question

我有一个简单的下拉组件，它仅允许我隐藏和显示一些HTML，这是非常基本的。

但是，如果我在内部使用相同的组件，则单击Test 2下拉开关将折叠第一个下拉列表...

<dropdown>

    <li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay()" :class="{ active: display }">

        Test

        <ul>

            <dropdown>

                <li slot-scope="{ display, toggleDisplay }" @click="toggleDisplay()" :class="{ active: display }">

                    Test 2

                </li>

            </dropdown>

        </ul>

    </li>

</dropdown>

为什么是这样？另外，我应该能够display = !display在click事件中进行切换而不是功能？

组件：

<script>

    export default {

        props: [ 'expanded' ],

        data: function() {

            return {

                display: !!(this.expanded)

            }

        },

        render() {

            return this.$scopedSlots.default({

                display: this.display,

                toggleDisplay: this.toggleDisplay

            })

        },

        methods: {

            toggleDisplay() {

                this.display = !this.display;

            }

        }

    }

</script>