Groups not being reactive

I'm trying allow only certain groups to be able to access posts. The problem I'm having is that when I try to manage the post my groups aren't changing according to what is in the database. What I mean by that is, I have 2 posts and 2 roles (admin, users) and in my manage page admin and users are checkboxes. and if I select post 1 and it will have both roles selected, but if I click on post 2 then both roles are selected but that is wrong it's only supposed to have only 1 role selected.

Also the way my are saved is in a roles column in posts and it gets saved as a json encoded string

Here is my code

This is where I add both my post table on one side and the post details on the other side

<template>
    <div class="row">
        <div class="col-md-6">
            <post-table :bus="bus" :posts="posts"></post-table>
        </div>
        <div class="col-md-6">
            <post-detail v-if="showPostDetail" :bus="bus" :post="selectedPost"></post-detail>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['bus', 'posts'],
        data() {
            return {
                showPostDetail: false,
                selectedPost: null
            }
        },
        mounted() {
            this.bus.$on('manage-post', payload => {
                this.selectedPost = payload.post;
                this.showPostDetail = true;
            });
        }
    }
</script>

This is the posts table

<template>
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-sm table-striped">
                <thead>
                    <tr>
                        <th style="width: 100px;">Title</th>
                        <th>Content</th>
                        <th style="width: 100px;"></th>
                    </tr>
                </thead>

                <tr v-for="post in posts">
                    <td>
                       {{ post.title }}
                    </td>
                    <td v-html="post.content.substr(0, 100)"></td>
                    <td style="text-align: right;">
                        <button class="btn btn-sm btn-outline-info" @click="manage(post)">Manage &raquo;</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['bus', 'posts'],
        data() {
          return {

          }
        },
        computed: {

        },
        methods: {
            manage(post) {
                this.bus.$emit('manage-post', { post: post });
            }
        },
        mounted() {
            
        }
    }
</script>

and this is my post details page

<template>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><strong>Manage Post</strong></h3>
            <div class="card-tools">
                <span style="cursor: pointer;" class="text-success mr-3" @click="savePost"><i class="fa fa-save"></i> Save Changes</span>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="card card-primary card-outline card-outline-tabs mb-0">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="post-detail-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="post-settings" data-toggle="pill" href="#post-settings-content" role="tab">Settings</a>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <div class="tab-content" id="post-detail-content">
                        <div class="tab-pane fade show active" id="post-settings-content" role="tabpanel" aria-labelledby="post-detail-tab-info">
                            <div class="form-group">
                                <label for="title">Title</label>
                                <input type="text" v-model="post.title" class="form-control">
                            </div>

                            <div class="form-group">
                                <label for="content">Content</label>
                                <textarea v-model="post.content"></textarea>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" v-model="roles" value="admin" id="admin">
                                <label class="form-check-label" for="admin">
                                    Admin
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" v-model="roles" value="user" id="user">
                                <label class="form-check-label" for="user">
                                    User
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['bus', 'post'],
        data() {
            return {
                roles: []
            }
        },
        watch: {

        },
        computed: {

        },
        methods: {
            savePost(){

            },
            getRoles(){
                JSON.parse(this.post.roles).forEach(role => {
                    this.roles.push(role);
                })
            }
        },
        mounted() {
            this.getRoles();
        }
    }
</script>