Jetpack Compose View Models not updating view

Question

I've created a view model in Jetpack Compose, but the view doesn't refresh when a variable updates inside it.

I've followed the view model guide here: https://developer.android.com/jetpack/compose/libraries#viewmodel

In the SignInWithGoogleView and SignInWithEmailAddressView , the signInOrSignUpMethod variable updates when I click on the ClickableText , but the SignInOrSignUpView doesn't update.

What am I missing?

enum class SignInOrSignUpMethod {
    Google,
    EmailOnly
}



class SignInOrSignUpViewModel: ViewModel() {
    var signInOrSignUpMethod: SignInOrSignUpMethod = SignInOrSignUpMethod.Google
}


//SignInOrSignUpView
@Composable
fun SignInOrSignUpView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {

    Box {

        //Background image
        Image(
            painter = painterResource(id = R.drawable.sign_in_sign_up_background),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            alpha = 0.35F,
            modifier = Modifier
                .background(Color.White)
        )


        Column(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally

        ) {
            //App Logo
            Image(
                painter = painterResource(id = R.drawable.app_logo),
                contentDescription = null,
                colorFilter = ColorFilter.tint(
                    (if (isSystemInDarkTheme()) {
                        Color.White
                    } else {
                        Color.Black
                    })
                ),
                modifier = Modifier
                    .size(125.dp, 125.dp)
                    .offset(0.dp, 50.dp)
            )

            Spacer(modifier = Modifier.height(150.dp))

            //Sign In Text
            Text(
                text = "Sign In",
                style = androidx.compose.ui.text.TextStyle(
                    fontSize = 30.sp,
                    fontWeight = FontWeight.Bold
                )
            )


            Spacer(modifier = Modifier.weight(1f))


            //Sign In Buttons
            if (signInOrSignUpViewModel.signInOrSignUpMethod == SignInOrSignUpMethod.Google) {
                SignInWithGoogleView()
            } else if (signInOrSignUpViewModel.signInOrSignUpMethod == SignInOrSignUpMethod.EmailOnly) {
                SignInWithEmailAddressView()
            }

        }
    }

}


@Composable
fun SignInWithGoogleView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {

    Text(
        text = "Google Sign In",
        style = androidx.compose.ui.text.TextStyle(
            fontSize = 30.sp,
        )
    )

    ClickableText(
        text = AnnotatedString("Continue with email address"),
        onClick = {
            Log.d("Print", signInOrSignUpViewModel.signInOrSignUpMethod.toString())
            signInOrSignUpViewModel.signInOrSignUpMethod = SignInOrSignUpMethod.EmailOnly
        }
    )
}


@Composable
fun SignInWithEmailAddressView(signInOrSignUpViewModel: SignInOrSignUpViewModel = viewModel()) {

    Text(
        text = "Email Sign In",
        style = androidx.compose.ui.text.TextStyle(
            fontSize = 30.sp,
        )
    )

    ClickableText(
        text = AnnotatedString("Continue with Google"),
        onClick = {
            signInOrSignUpViewModel.signInOrSignUpMethod = SignInOrSignUpMethod.Google
        }
    )
}

Answer 1

This bit I was missing was in my ViewModel to declare mutableStateOf:

class SignInOrSignUpViewModel: ViewModel() {
    var signInOrSignUpMethod: SignInOrSignUpMethod by mutableStateOf(SignInOrSignUpMethod.Google)
}