How to render components in VueJs?

Question

I want to render component dependent on my variables I use it :

<div>{{ auth ? <AuthCorrect /> : <AuthIncorrect /> }}</div>

but my app render like this :

{{ auth ? auth correct : AuthIncorrect }}

Someone know how to figure out this?

Answer 1

Conditional Rendering

<div v-if="auth">Authentication Successful</div>
<div v-else>Authentication Failed</div>