Calling A function using vue.js components and properties

I am creating a shopping cart type button to count the number of times clicked, the button should call a function when clicked with the parameter of the id, however, it won't call the function with the correct parameter

I have tried adding {{id}} and :onClick="addThisToCart({{id}} but getting a ton of errors.

Heres my code

        Vue.component('movietable', {
            props: ['title', 'price', 'mid'],
            template: `
                <tr>
                    <td>{{title}}</td>
                    <td>{{price}}</td>
                    <td>
                    <div class="quantity">
                        <button onClick="addThisToCart({{mid}}">You clicked me {{ count }} times.</button>
                    </div>
                    </td>
                </tr>
                `,
            data: function () {
                return {
                    count: 0
                }
            },
        });

mid is being defined in the properties section of the vue element and then the function

var cart = 0;
        function addThisToCart(movieId) {
            var movieId = this.mid;
            this.cart += 1;
            this.cart += 1;
            console.log(movieId);
            console.log(cart);
        }

It should add +1 to cart every time the button is clicked, however, getting a ton of errors and instead of sending '4434' it is sending {{mid}}