How to use conditionals without attaching it to an element? - vue.js

Question

In vue, we have got directives v-if which needs to be attached to element.
Is there a way to use conditionals without attaching them to anything like the mustachejs way?
I am looping through an array of words and it is adding div's in every word which is annoying
Here is my template
<div v-for="(str, index) in reference" :key="index">
<div v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</div>
<div v-else>
{{str}}
</div>
</div>
I would be nice if i could do it like this:|
{{if true}}
something goes here
{{else}}
other thing goes here
{{\if}}

Answer 1

Here is your code but using the < template > tag
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
Here is a example from the official Vue documentation:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
More informations: https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key
You can also use a Method and use normal Javascript into the < script > at the bottom of your file
Hope this helped, cheers

Answer 2

you could use the 'template' like so:
<template v-if=patternIncluded(str)>
//code
</template
<template v-else>
//code
</template>
UPDATE so like this
<div-for="(str, index) in reference" :key="index">
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
</div>