vue create component from server rendered html

I have a Vue instance already loaded with webpack which loads .vue files properly. However there are some files that I cannot use load as some of the html is rendered dynamically from the server.

Suppose I have a HTML file with the content below:

<div id="test">
  <input type="text" :value="message"></input>
</div>

How do I create a vue component with the template above?

This was my attempt.

const component = new Vue({
    name: 'test-component',
    el: '#test',
    data: {
        message: "hello world!"
    },
});

What I want rendered is

<div id="test">
  <input type="text" value="hello world!"></input>
</div>