[Vue warn]: You may have an infinite update loop in a component render function - cannot see why

Question

I have a method in Vue to take an array of tags and sets it to an array value in an object. I've been having problems with the error suggesting an infinite loop. When a tag is input, it should call the addData method.

I came across this question with the same error (You may have an infinite update loop in a component render function), and have been trying to make sure the method does not cause the component to re-render by creating a new array and using the Vue.set function. I am still getting the infinite loop error and I have not idea why after much head banging.

To add to my confusion, I print out the data, and when I add the tags they add to the data as expected, not an infinite amount of times.

The relevant code:

In the html template:

<div class="columns is-vcentered is-centered" v-if="true">
    <b-field label="Preferences (leave empty for any)">
        <b-taginput 
            maxtags="5"
            maxlength="20"
            placeholder="eg: Aldi"
            v-model="tags['supermarket']"
            :create-tag="addData('supermarket')">
        </b-taginput>
    </b-field>
</div>

In the script:

<script>
export default {
    data() {
        return {
            tags: {
                supermarket: []
            },
            data: {
                supermarket: {
                    isSelected: false,
                    amenity: "supermarket",
                    preferences: []
            }

        }
    },
    methods: {
        addData(amenityName) {
            let prefs = [];
            for (let t in this.tags[amenityName]){
                prefs.push({
                    amenity: this.tags[amenityName][t]
                });
            };
            this.$set(this.data[amenityName], "preferences", prefs); 
        }
    }
}