laravel vuejs — обновление флажка ввода на локальном, но не рабочем сервере

У меня есть веб-проект, который использует vuejs 2.5.13 с динамическим laravel 5.5 данные.

в page.blade.php у меня есть компонент Vue post-list,

page.blade.php:

<post-list :posts="{{json_encode($posts)}}"></post-list>

И в post-list:

post-list.vue:

<template>
<div class="post-list">
<ul class="list-group">
<li v-for="post in postdata">

{{post.publish}}

<input type="checkbox" v-model="post.publish" @click="togglePublish(post.id,post.publish)">
</li>
</ul>
</div>
</template>

<script>
...
props: ['posts'],
data: function() {
return {
postdata: [],
}
beforeMount: function() {
var self = this;
self.postdata = self.posts.data;
...
},
</script>

{{post.publish}} в шаблоне есть 0, который является таким же, как сервер, но флажок просто не обновлялся, он проверяется каждый раз.

Еще одна вещь, на которую следует обратить внимание, это прекрасно работает на местном уровне. Но не обновлялся при загрузке на веб-сервер. Я не уверен почему.

Как я могу решить это?

Update01

Weird. Я просто вынимаю v-model и флажок всегда снят, что нормально. но когда v-model="post.publish" добавил, даже значение post.publish 0, флажок все еще установлен.