vue js in laravel..Computed method is undefined

I tried to get data but it says computed method is undefined in vue dev tool my methods are

<script>
export default{
    name:"about",
        mounted(){
            this.$store.dispatch('getFrontAbouts');
        },
        computed:{
            about(){
                return this.$store.getters.about;
            }
        },
}
</script>

store2.js file where i get those data by axios call

export default{
      state: {
      aboutData:[],
  },
  getters:{
    about(state){
      return state.aboutData;
    },
    },
  actions:{
      getFrontAbouts(data){
      axios.get("get-front-about").then((response)=>{
        data.commit('about',response.data.about);
      }).catch((error)=>{

      })
    },
  },
  mutations: {
    about(state,data){
      return state.aboutData = data;
    },
  }
}

my controller file where i am fetching data

public function about(){

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);

}

here is my vue component where computed about method is being executed

<div class="row topmargin bottommargin gutter-lg-50 align-items-center">
                        <div class="col-lg-12 p-lg-5">
                            <div class="heading-block border-bottom-0 mb-0">
                                <h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
                                <p v-if="about">{{about.about_us}}</p>
                                <div class="row">
                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="3" data-refresh-interval="2" data-speed="600"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Branches</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="37" data-refresh-interval="11" data-speed="900"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Single Studios</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="21" data-refresh-interval="3" data-speed="1000"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Events per Month</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="100" data-to="4500" data-refresh-interval="100" data-speed="1500"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Active Members</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>

                    <div class="row justify-content-center topmargin-sm">
                        <div class="col-md-5 offset-md-1">
                            <h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Why do you choose DreamsEye?</h3>
                            <p v-if="about">{{about.choice_us}}</p>
                        </div>
                        <div class="col-md-5 pl-md-5">
                            <h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Our Address</h3>
                            <p v-if="about">{{about.address}}</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

here is my vue dev tool screenshot enter image description here

here is my response screenshot

enter image description here

you guys just look at my methods and vue component...But the actual problem was in my controller where...

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);

to

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about'=>$about],200);