make input (checkbox) disable when one of checkboxes is clicked in vue.js

I've been working on this problem and I searched about this for an hour, but none of the answers led me to the correct answer.

I have three items(sorry I hard coded) which every single item contains one input(checkbox), and what I want to achieve is when one of the checkboxes is clicked, make others disable to click in vue.js.

<template>
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
</template>

<script>
    export default {
        data: function () {
            selectedContent: [],
        }, 
        methods: {
            addContent: function(data) {
                if (this.selectedContent.length === 0){
                  this.selectedContent.push(data);
                }
            }
        }
    }
</script>

I read I need :disabled to make input disable, so I thought after I push one item to selectedContent, it'd disable my inputs, but it doesn't. I can still clickable other inputs even after I checked one of them. Can anyone point me out what I'm doing wrong?