title: Laravel Vue.js will not bind to input text
body: <p>I am using Laravel and want to create a simple edit application for editing a post. I am using Vue.js 2 to bind the data, but somehow it will not display it - and I am unsure what could be wrong. When I display the data using Vue's e.g  of <code>@{{ postData.title }}</code> it displays the title on the page. But I want to display the data inside a input so that it can be edited. The routing and everything is fine, because I get the correct URL and I can display the data in Vue just not in the textboxes. Thanks in advance.</p>
  
  <p>Here is my HTML: </p>
  
  <pre><code> &lt;div id="postEdit"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;form class="form-horizontal" method="POST"&gt;
          &lt;meta id="_token" content="{{ csrf_token() }}"&gt;
            &lt;h1&gt;Edit your post&lt;/h1&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="title"&gt;Title&lt;/label&gt;
             @{{ postData.title }}
            &lt;input type="text" name="title" id="title" class="form-control" v-model="postData.title"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="post"&gt;Post&lt;/label&gt;
            &lt;textarea name="post" rows="8" cols="80" id="post" class="form-control" v-model="postData.post"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;input type="submit" name="submit" value="Submit Post" id="submit" class="btn btn-primary"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the Vue.js:</p>
  
  <pre><code>var edit = new Vue({
    el: '#postEdit',
    data: {
      postData: &lt;?php echo $post ?&gt;,
    },
  
    methods: {
  
    },
  });
  </code></pre>
  
  <p>My controller: </p>
  
  <pre><code>   public function edit($id){
        $post = Post::find($id);
        return view('post.edit', compact('post'));
      }
  </code></pre>