How to bind an input tag inside a popover to Vue Model

I have an input inside a popover content like so:

JSFiddle

HTML:

<div id="vue-app">
    <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'>
        Click Me!
    </div>
    <hr>
    <input v-model="message"> {{ message }}
</div>

And here is JS :

new Vue({
    el: '#vue-app',
    data: {
        message: 'I am a Text'
    }
});
$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

As you can see the input out of data-content binds well, but the one inside doesn't bind!

Any idea would be great appreciated.