Reusing the same v-app in vue - vuejs2

Question

I have the below pug/html:
table.accountinfo.table.table-sm
thead.thead
tr
th #
th Name
th Address
th Balance
tbody
tr(v-for="account in accounts")
td {{account.accountID}}
td {{account.name}}
td
span(title='{{account.accountAddress}}').ellipsisoverflow {{account.accountAddress}}
td
span {{account.balance}}
table.accountinfo.table.table-sm
thead.thead
tr
th #
th Name
th Address
th Balance
tbody
tr(v-for="account in accounts")
td {{account.accountID}}
td {{account.name}}
td
span(title='{{account.accountAddress}}').ellipsisoverflow {{account.accountAddress}}
td
span {{account.balance}}
And the below vue script:
var accountinfo = new Vue({
el: '.accountinfo',
data: {
accounts: []
}
});
When I open my html file only the first table is correctly created (mutiple rows with the correct data). The second table however is not created correctly and shows the values including the brackets (and thus are not replaced bye vue). I assume this is the case as the same v-app is used twice. How can I configure this so both elements/tables are correctly created using the same v-app?

Answer 1

I don't think it's written specifically anywhere but as per the docs linking is done with ids, this is to ensure that one vue instance is only linked to 1 root element.
It's not possible to mount 1 app on multiple elements.
In line with your edit, you have a couple of ways to do what you want:
Change the selector for the second form and register another Vue instance with that Id.
Have one wrapping container that the Vue instance is registered to then each table can read from the same accounts variable.