Conditional Rendering with Reactive Data

Set up a Vue component that conditionally renders different parts of the template based on reactive data changes, showing reactivity in action.

<template>
  <div>
    <h1 v-if="isLoggedIn">Welcome back, user!</h1>
    <h1 v-else>Please log in.</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
    };
  },
  // Simulate a login action
  mounted() {
    setTimeout(() => {
      this.isLoggedIn = true;
    }, 2000);
  }
};
</script>

<style>
h1 {
  color: blue;
}
</style>

Vue component template with reactive data. Initially, it shows 'Please log in.' After 2 seconds, it changes to 'Welcome back, user!' due to simulated login by setting `isLoggedIn` to true.