Передача переменной PHP в качестве опоры компоненту вкладки Vue

Я пытаюсь передать переменную PHP $ avail в качестве опоры для моего компонента Vue ComponentHome.

Ниже представлена ​​упрощенная версия моего кода. На моей странице переменная «avail» кажется неопределенной, так как пробел после «Доступность:» пуст. Я пробовал использовать v-bind: avail = "{{$ avail}}", но потом ни один из моих компонентов не загрузился. Почему это? Есть ли проблема, потому что только один из компонентов вкладки использует эту переменную? Или я не правильно прохожу?

Дополнительная информация: я проверил, что переменная PHP $ avail установлена ​​правильно. Панель навигации Vue также не должна быть проблемой, поскольку раньше она работала нормально.

index.php

<?php $avail = "Coming soon"; ?>

<!--navigation bar begin-->
  <nav class = "navbar navbar-inverse">
    <div class = "container">
      <div class = "navbar-header">
        <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#myNavbar">
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
        </button>
      </div>
      <div class = "collapse navbar-collapse" id = "myNavbar">
        <ul class = "nav navbar-nav" data-toggle = "collapse" data-target = "#myNavbar">
          <li class = "clickable"
            avail = "{{ $avail }}"
            v-for = "tab in tabs"
            v-bind:key = "tab"
            v-bind:class = "[{ active: currentTab === tab }]"
            v-on:click = "currentTab = tab"
          ><a>{{ tab }}</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!--navigation bar end-->

<!--tab content begin-->
  <keep-alive><!--to cache inactive components-->
    <component v-bind:is = "currentTabComponent"></component>
  </keep-alive>
<!--tab content end-->

app.js

var ComponentHome = {
    template:
    '<div class = "container">\
        <h3>Availability: {{ avail }}</h3>\
    </div>',
    props: ['avail'],
    data: function() {
        return {
            avail: this.avail
        }
    }
}

var vm = new Vue({
  el: "#content",
    components: {
        "tab-home" : ComponentHome,
        "tab-costsandamenities" : ComponentCosts,
        "tab-photos" : ComponentPhotos,
        "tab-application" : ComponentApplication
    },
  data: {
    currentTab: "Home",
    tabs: ["Home", "Costs and Amenities", "Photos", "Application"]
  },
  computed: {
    currentTabComponent: function () {
      return "tab-" + this.currentTab.replace(/ /g ,"").toLowerCase();
    }
  }
})