Scoping of HTML element id in Vue component

Is there some built-in scoping mechanism for Vue component in the sense that value of id attribute of html element inside Vue component be uniquely defined without programmer's efforts to do it?

In the following code, I create two components and hope each behaves independently to each other. So, ideally if I click on each button, each is required to print out "foo" but actually not because value of ids are duplicated.

<!DOCTYPE html>

<head>
    <title></title>
</head>

<body>
    <div id="app">
        <my-comp></my-comp>
        <my-comp></my-comp>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.component('my-comp', {
            template: `
                <div>
                    <button id="btn" @click="onClick">Click me</button>
                    <div id="pid"></div>
                </div>
            `,
            methods: {
                onClick(e) {
                    $('#pid').text("foo");
                }
            },
        });

        const vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        });
    </script>
</body>

</html>

Solution

Don't use id in vue components unless you are passing a unique value for it using props. You should very rarely ever actually need to get a reference to an element in vue and if you do find you need to then you should be using refs.

In your case you can just use a property and template binding to handle things for you:

Vue.component('my-comp', {
    template: `
                <div>
                    <button @click="onClick">Click me</button>
                    <div>{{ text }}</div>
                </div>
            `,
    data() {
        text: ''
    },
    methods: {
        onClick(e) {
            this.text = 'foo'
        },
    },
})