Partial Hydration in Vue.Js

Lets say I have this simple structure as mounted Vue.js;

<div id="app">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>

Normally vue.js mounted on

<div id="app"></div>

as empty and renders it later. And I have the exact content of main div of that specific page as like this;

<div id="main">
    <p>this is the only content</p>
</div>

How can I partial hydrate the main div? Can I just send page like this;

<div id="app">
    <div id="main">
        <p>this is the only content</p>
    </div>
</div>

and mount vue on it? or what is the way here? There won't be a node.js server in background.