Vue 2 - Как выбрать правильный вариант ‹select› после получения данных из базы данных

Я использую Vue 2 для небольшого блога. У меня есть отдельный компонент для формы сообщения, и один из входов формы - это select (для категории сообщения). Выбор заполняется после получения категорий из БД. Компонент также получает объект post от родительского компонента, который также извлекается из базы данных (см. props: ['post']).

Вот код:

// HTML
...
<select class="form-control" v-model="post.category_id">
    <option 
        v-for="cat in categories" 
        v-bind:value="cat.id">
        {{ cat.name }}
    </option>
</select>
...

// JS
module.exports = {
    props: ['post', 'url'],
    name: 'postForm',
    created: function() {
        this.syncCats()
    },
    methods: {
        syncCats: function() {
            this.$http.get("/api/categories")
            .then(function(res) {
                this.categories = res.data 
            })
        }
    },
    data: function() {
        return {
            categories: {}
        }
    }
}

Проблема, с которой я столкнулся, заключается в том, что ни один из параметров не выбран по умолчанию. Похоже, это. Но когда я открываю выбор, я вижу обе категории из моей базы данных, например this.

Я хочу выбрать правильное (post.category_id == cat.id) значение по умолчанию. Как бы я это сделал?

Я пробовал <select ... :v-bind:selected="post.category_id == cat.id">, но случилось то же самое.

Изменить

Хорошо, теперь я попытался сбросить и post.category_id, и cat.id вот так:

<div class="form-group">
  <label>Category</label>
  <select class="form-control" v-model="post.category_id">
    <option 
        v-for="cat in categories" 
        :value="cat.id"
        :selected="cat.id == post.category_id">
        {{ cat.name }} {{ cat.id }} {{ post.category_id }}
    </option>
  </select>
</div>

И до того, как я выберу какой-либо вариант, результат будет this - печатается только cat.id, post.category_id - нет. Однако после того, как я выберу какой-либо вариант, также появится post.category_id, например this. Обратите внимание, что цифра «1» в конце появляется только на втором снимке экрана после того, как я выбрал один из вариантов - {{ post.category_id }}.

Это означает, что сообщение загружается после категорий и что я должен каким-то образом повторно инициализировать выбор после его загрузки. Как бы я это сделал? Для справки, это родительский компонент, который получает сообщение.

<template>
    <span id="home">
        <postForm :post="post" :url="url"></postForm>
    </span>
</template>
<script>
var postForm = require('../forms/post.vue')

module.exports = {
    name: 'postEdit',
    created: function() {
        this.$http.get('api/posts/slug/' + this.$route.params.slug)
        .then(function(response) {
            if(response.status == 200) {
                this.post = response.data
                this.url = "/api/posts/slug/" + response.data.slug
            }
        })
    },
    data: function() {
        return {
            post: {},
            url: ""
        }
    },
    components: {
        postForm
    }
}
</script>