How can I pass a value to the VUE from a link

I need to pick up the id from a record and show it with VUE from a JSON.

File response:

class DetalleResource extends JsonResource {
    public function toArray($request) {
        return [
         'id' => $this->id,
         'titulo' => $this->titulo,
         'foto' => $this->foto,
         'descripcion' => $this->descripcion,
         'created_at' => (string)$this->created_at,
         'updated_at' => (string)$this->updated_at,
       ]; 
    }
}

Controller:

class DetalleController extends Controller {
    function show ($id) {
        DetalleResource::withoutWrapping();
        return new DetalleResource(Noticia::find($id));
    }
}

Route in api.php:

Route::get('detalle/{id}', 'DetalleController@show');

File vue:

var app = new Vue({
    el: '#app',
    data: {
        json: null,
    },
});
$.getJSON('/api/detalle/id.json', function (json) {
    app.json = json;
}.bind(this));

I'm calling from a link inside a loop that shows all the news:

<div class="col content">
    <a href="noticia-detalle.html">
        <input type="hidden" v-value="item.id">
        <p>Detalle Noticia</p>
    </a>
</div>

But in the file detalle.html I get empty, how can I pick up the id of the selected news?

<div id="app">
    <p class="title">{{ json.titulo }}</p>
</div>