<template>
  <div>
    <h1>Full Name</h1>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Full Name: John Doe

<template>
  <div>
    <h1>Status</h1>
    <p>{{ statusMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  },
  computed: {
    statusMessage() {
      return this.isLoggedIn ? 'Welcome back!' : 'Please log in.';
    }
  }
};
</script>

<template>
  <div>
    <h1>Price with Tax</h1>
    <p>Original Price: {{ price }}</p>
    <p>Price with Tax: {{ priceWithTax }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      taxRate: 0.07
    };
  },
  computed: {
    priceWithTax() {
      return (this.price * (1 + this.taxRate)).toFixed(2);
    }
  }
};
</script>

Original Price: 100
Price with Tax: 107.00

<template>
  <div>
    <h1>Full Name</h1>
    <input v-model="fullName" />
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1] || '';
      }
    }
  }
};
</script>