1-main.js

import Vue from 'vue'
import App from './App.vue'

import Storage from './utils/Storage';
import moment from 'moment';

var halfDay = moment().date(15),
    lastDay = moment().endOf("month"),
    payDayStoragePrefix = moment().get('year') + "." +
                            moment().format("MM");

while (halfDay.day() > 5) {
  halfDay.subtract(1, "days");
}

while (lastDay.day() > 5) {
  lastDay.subtract(1, "days");
}

export const Settings = new Vue({
  data: {
    payDay1: Storage.get(
      payDayStoragePrefix + ".payDay1",
      {
        parser: "DATE",
        default: halfDay,
      }
    ),

    payDay2: Storage.get(
      payDayStoragePrefix + ".payDay2",
      {
        parser: "DATE",
        default: lastDay,
      }
    ),

    income: Storage.get("income", { parser: "FLOAT", default: 0 }),
  },

  watch: {
    payDay1 (v) {
      Storage.set(payDayStoragePrefix + ".payDay1", v);
    },

    payDay2 (v) {
      Storage.set(payDayStoragePrefix + ".payDay2", v);
    },

    income (v) {
      Storage.set("income", v);
    },
  },

  methods: {
    isValid () {
      return this.payDay1 != undefined &&
              this.payDay2 != undefined &&
                ![undefined, 0, null, "0.00", NaN]
                  .includes(this.income);
    },
  },
});

new Vue({
  el: '#app',
  render: h => h(App)
})

2-welcome.vue

<template>
  <db-settings-form
    v-if="welcomeStep == 'incomeSettings'"
  />

  <db-bill-entry
    v-else-if="welcomeStep == 'billEntry1'"
    title="Bills during 1st pay period"
    pay-period="1"
    prev-section="Income settings"
    next-section="Bills during 2nd pay period"
    :sub-title="billEntry1SubTitle"
    :initialBills="payDayBills"
    @stepBack="welcomeStep = 'incomeSettings'"
    @stepFwd="welcomeStep = 'billEntry2'"
  />

  <db-bill-entry
    v-else-if="welcomeStep == 'billEntry2'"
    title="Bills during 2nd pay period"
    pay-period="2"
    prev-section="Bills during 1st pay period"
    next-section="My dashboard"
    :sub-title="billEntry2SubTitle"
    :initialBills="payDayBills"
    @stepBack="welcomeStep = 'billEntry1'"
    @stepFwd="welcomeStep = 'done'"
  />

  <div v-else>
    Dashboard...
  </div>
</template>

<script>
  import { Settings } from './main';
  import Storage from './utils/Storage';

  import dbSettingsForm from './SettingsForm';
  import dbBillEntry from './BillEntry';

  export default {
    data() {
      return {
        welcomeStep: Storage.get(
          "welcomeStep",
          { default: "incomeSettings" }
        ),

        payDayBills: Storage.get(
          "payDayBills",
          {
            parser: "JSON",
            default: [],
          }
        ),
      };
    },

    components: {
      dbSettingsForm,
      dbBillEntry,
    },

    computed: {
      billEntry1SubTitle () {
        debugger; // Here is where it says Settings is not defined
        var start = Settings.payDay1.format("dddd, MMM Do"),
            ending = Settings.payDay2.subtract(1, "days")
                                     .format("dddd, MMM Do");

        return start + " – " + ending;
      },

      billEntry2SubTitle () {
        var start = Settings.payDay2.format("dddd, MMM Do"),
            ending = Settings.payDay2.endOf("month")
                                     .subtract(1, "days")
                                     .format("dddd, MMM Do");

        return start + " – " + ending;
      },
    },

    watch: {
      welcomeStep (v) {
        console.log("Welcome step", v);
        Storage.set("welcomeStep", v);
      },

      payDayBills: {
        deep: true,
        handler (current) {
          Storage.set("payDayBills", current, { formatter: "JSON" });
        },
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>