After encountering a problem with understanding how actions work in Vuex, I realized that the async call was not triggering the repaint of the orders. In order to handle asynchronous tasks, it is essential to use actions in Vuex. Actions allow for handling scenarios like calling an API and waiting for the response before updating the state using mutations, which are reactive in Vuex. This required me to convert a significant portion of my local data into computed properties and retrieve information from the storage directly instead of relying on getters to populate the local storage.

This adjustment also enabled me to properly utilize the vuex storage in the station nav component.

Below, you can find the modified files that now function as expected.

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    greenboard :{
      station: 1,
      incomplete_orders:[],
      complete_orders:[],
    },
    yellowboard:{
      incomplete_orders:[],
      complete_orders:[],
    },
    dashboard:{

    },
  },
  getters: {
    greenIncomplete: state => {
      return state.greenboard.incomplete_orders;
    },

    greenComplete: state => {
      return state.greenboard.complete_orders;
    },

    greenStation: state => {
      return state.greenboard.station;
    }
  },
  mutations: {
    updateGreenOrders (state,payload){
      console.log(payload);
      state.greenboard.incomplete_orders = payload.incomplete_orders;
      state.greenboard.complete_orders = payload.complete_orders;
      state.greenboard.station = payload.station;
    },
    updateGreenStation (state,payload){
      Vue.delete(state.greenboard, 'station');
      Vue.set(state.greenboard, 'station', payload.station);
    }
  },
  actions: {
    async updateGreenOrders(context,payload){
      try{
        const incomplete = await axios.get('/internal/green-orders/'+payload.station+'/0/');
        const complete = await axios.get('/internal/green-orders/'+payload.station+'/1/');
        context.commit({
          type:"updateGreenOrders",
          incomplete_orders: incomplete.data.data,
          complete_orders:complete.data.data,
          station:payload.station
        });
      }catch(e){
        console.log(e);
      }
    }
  }
});

StationsNav.vue

<template>
  <ul>
    <li v-for="station in stations" v-bind:key="station.id" v-on:click="stationChange(station.id)">{{station.station_name}}<br />{{station.description}}</li>
  </ul>
</template>

<script>
    export default {
      name:'StationsNav',
      components:{},
      data(){
          return {
            stations: [],
            chosen_station:0 ,
            error:"",
          }
      },
      created(){
        this.fetchStations();
      },

      methods:{
        async fetchStations(){
          try{
            const res = await axios.get('/internal/stations/');
            this.stations = res.data.data;
          }catch(e){
            console.log(e);
          }

        },

        stationChange(stationId){
          this.$store.dispatch({
            type:"updateGreenOrders",
            station:stationId
          });
        }
      },
      mounted() {

      }
    }
</script>

GreenOrders.vue

  <template>
    <div class="container-fluid">
      <!--button class="buton" v-on:click="debug">
        debug
      </button-->
      <div class="row justify-content-center">
        <div class="col-md">
          <h3>Green Orders Station {{station}}</h3>
          <p>
            These orders are referenced from the Woocomerce system for orders ready to be shipped.
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_incomplete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
        <div class="col-md">
          <h4>Monitor Completed Orders</h4>
          <p>
            Completed orders eventually fall out of the system once their status is updated in Woocomerce
          </p>
          <order-card
          v-on:orderstatuschange = "changeOrderStatus"
          v-for="order in orders_complete"
          v-bind:key="order.id"
          v-bind:id="order.id"
          v-bind:order_id = "order.order_id"
          v-bind:number_of_items = "order.number_of_items"
          v-bind:completion = "order.completion"
          ></order-card>
        </div>
      </div>

    </div>
  </template>

<script>
    export default {
      name:'OrdersDisplay',
      components:{},
      data(){
          return {
            error:"",
          }
        },
      computed: {
        orders_incomplete(){
          return this.$store.state.greenboard.incomplete_orders;
        },
        orders_complete(){
          return this.$store.state.greenboard.complete_orders;
        },
        station(){
          return this.$store.state.greenboard.station;
        }
      },
      created(){
        this.fetchOrders(this.station);
      },

      methods:{
        fetchOrders(station){
          this.$store.dispatch({
            type:"updateGreenOrders",
            station:this.station
          });
        },

        async changeOrderStatus(order){
           try{
             const res = await axios.post('/internal/order/'+order.id+'/'+order.status+'/');
             this.fetchOrders(this.station);
           }catch(e){
             console.log(e);
           }
        },

        intervalUpdate(){
          var s = this;
          setInterval(function () {
            s.fetchOrders(s.station);
          }, 1000);
        },

        debug(){
          console.log("I'M THE CREAM OF THE CROP!")
        }

      },

      mounted() {
        //this.intervalUpdate();
        //this.fetchIncomplete(this.station);
        //this.fetchComplete(this.station);
        //console.log(this.$store.state.greenboard.incomplete_orders);
      }
    }
</script>

GreenBoard.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-3">
        <stations-nav></stations-nav>
      </div>
      <div class="col-9">
        <green-orders></green-orders>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
      name:'GreenBoard',
      components:{},
      data(){
          return {
          }
      },

      created(){

      },

      methods:{

      },
      mounted() {

      }
    }
</script>

Documentation that provided insight into the issue: https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components

Conclusion

To simplify the problem for future reference, when using Vuex, ensure to use mutations for reactivity. For asynchronous operations, utilize actions following this cycle:

dispatch action -> action resolves -> commit results -> vue reacts.

If any experienced individuals have additional insights, please share. Special thanks to Decade Moon for pointing me in the right direction.