Uncaught (in promise) ReferenceError: computed is not defined

Please I have an error that has refused to go away. I am developing a simple blog and I used the computed property it threw up Uncaught (in promise) ReferenceError: computed is not defined in the browser console. I am using Vue 3 by the way and thanks for helping in advance.

Below are the lines of code

<script>

export default {

    props: {

         layout: {

            type: String,

            default: 'list',

        }

    },

     

    setup(props) {

        let isGrid = computed (() => {

            return props.layout == 'grid';

        });

        let isList = computed (() => {

            return props.layout == 'list';

        });

        return {

            isGrid,

            isList,

        }

    },

}

</script>

So I solved the problem. I was going to delete the question but I felt it should remain so that other could learn from it.
Solution:
Apparently, it was scope issue. I had to move setup() into the props scope and that solved the problem. Find the new code below:

props: {

         layout: {

            type: String,

            default: 'list',

        },

    setup(props) {

        let isGrid = computed (() => {

            return props.layout == 'grid';

        });

        let isList = computed (() => {

            return props.layout == 'list';

        });

        return {

            isGrid,

            isList,

        }

    }

    }