[bug] User profile page is not shown - JavaScript error in console for "ConnectedAccount.vue"

[Trifisch]

Describe the bug
After installing Socialstream v4.4.5, I get the following JavaScript error if I navigate the profile page of a user:
"Uncaught (in promise) ReferenceError: computed is not defined" in file "resources/js/Components/ConnectedAccount.vue".

To Reproduce
Steps to reproduce the behavior:

1. Install Socialstream with Google provider.
2. After login with Google, navigate to user profile.
3. See error

Expected behavior
Profile page should be shown with connected account "Google".

Environment context

• Socialstream version: 4.4.5
• Jetstream stack: Inertia
• Laravel version: 10.28.0
• PHP version: 8.2.10

Analysis
The file "ConnectedAccount.vue" seems to have some errors:

• "computed" is not imported from "vue"
• The providerName seems to be computed from a wrong variable "name".
• The provider property is referenced without "props." object

Potential solution
Changing the <script setup> section to the following worked for me. If desired, I may also create a pull request.

<script setup>
import { computed } from 'vue';
import BitbucketIcon from '@/Components/SocialstreamIcons/BitbucketIcon.vue';
import FacebookIcon from '@/Components/SocialstreamIcons/FacebookIcon.vue';
import GithubIcon from '@/Components/SocialstreamIcons/GithubIcon.vue';
import GitLabIcon from '@/Components/SocialstreamIcons/GitLabIcon.vue';
import GoogleIcon from '@/Components/SocialstreamIcons/GoogleIcon.vue';
import LinkedInIcon from '@/Components/SocialstreamIcons/LinkedInIcon.vue';
import SlackIcon from '@/Components/SocialstreamIcons/SlackIcon.vue';
import TwitterIcon from '@/Components/SocialstreamIcons/TwitterIcon.vue';

const props = defineProps({
    provider: String,
    createdAt: {
        type: String,
        default: null,
    }
});

const providerName =  computed(() => {
    switch(props.provider) {
        case 'twitter':
        case 'twitter-oauth-2':
            return 'Twitter'
        case 'linkedin':
        case 'linkedin-openid':
            return 'LinkedIn'
        default:
            return props.provider.charAt(0).toUpperCase() + props.provider.slice(1);
    };
});
</script>

[Trifisch]

Thanks!