Colocar valor no v-model com PHP

Boa noite!

Você está gerando página de vue dinamicamente pelo php? O Lavavel favorece isso? Digo porque a App SPA é servida estaticamente e não dinamicamente.

Bom, nunca fiz isso, mas você pode tentar

value="$value"

Rola?

Se você quer passar alguma variável PHP para o Vue, será através de props.

Você pode até passar a variável dentro de um tag <script>, entretanto, eu não gosto desta abordagem.

Acredito que será mais fácil usar o Axios / VueResource na rota desejada e retornar os dados.

Por padrão o Laravel já retorna Json

A partir deste momento possui dois caminhos:

1º Fazer tudo em um componente Vue e chamar ele dentro do Blade

2º Fazer tudo no Blade, dentro de uma div que será controlada pelo Vue.

Exemplo

Blade.php

    <div id="app">
        <form action="/projects" method="post" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">

            <div class="form-group">
                <label for="name">Project Name</label>

                <input type="text" name="name" id="name" class="form-control" v-model="form.name">

                <span class="alert" v-if="form.errors.has('name')"> @{{ form.errors.get('name') }} </span>
            </div>

            <div class="form-group">
                <label for="description">Project Description</label>

                <input type="text" name="description" id="description" class="form-control" v-model="form.description">

                <span class="alert" v-if="form.errors.has('description')"> @{{ form.errors.get('description') }} </span>
            </div>

            <div class="form-group">
                <button class="btn btn-primary" :disabled="form.errors.any()">Create</button>
            </div>

        </form>
    </div>

App.js

class Errors {
    constructor() {
        this.errors = {}
    }

    has(field) {
        return this.errors.hasOwnProperty(field)
    }

    any() {
        return Object.keys(this.errors).length > 0
    }

    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0]
        }
    }

    record(errors) {
        this.errors = errors
    }

    clear(field) {
        if (field) {
            return delete this.errors[field]
        }

        this.errors = {}
    }
}

class Form {
    constructor(data) {
        this.originalData = data

        for (let field in data) {
            this[field] = data[field]
        }

        this.errors = new Errors()
    }

    data() {
        let data = Object.assign({}, this)

        delete data.originalData
        delete data.errors

        return data
    }

    reset() {
        for (let field in this.originalData) {
            this[field] = ''
        }
    }

    submit(requestType, url) {
        axios[requestType](url, this.data())
            .then(this.onSuccess.bind(this))
            .catch(this.onFail.bind(this))
    }

    onSuccess(response) {
        alert(response.data.message)

        this.errors.clear()
        this.reset()
    }

    onFail(error) {
        this.errors.record(error.response.data.errors)
    }
}

new Vue({
    el: '#app',

    data: {
        form: new Form({
            name: '',
            description: ''
        })
    },

    methods: {
        onSubmit() {
            this.form.submit('post', '/projects')
        }
    }
})

Desculpe, mas eu tbm não expliquei direito. Digamos que eu queria algo do tipo:

<form>
    @php
        $value = old(value');
        if($company) {
            $value = $company->value;
        }
    @endphp

    <input v-model="inputValue" value="{{ $value }}" />

    <span v-show="inputValue == 999">WOW!</span>
</form>

O projeto o qual está usando o Vue2 não é SPA, apenas utiliza o Vue2 como biblioteca mesmo. Agradeço pela resposta(e eu aprendi coisa nova com ela), mas eu consegui resolver da seguinte forma:

Na view do laravel eu faço assim:

<script type="text/javascript">
    @if($company)
      _data = JSON.parse('<?php echo $json; ?>');
    @else
      _data = '';
    @endif
</script>

<input name="algo" v-model="company.algo" />

No Vue:

data() {
   return {
      company: _data,
   }